1

順序付けられていないリストを使用して作成された水平メニューがあります。メニューは固定幅の div に含まれています。

<div class="mainContainer">
  <div>
    <ul class="menu">
      <li class="menuItem">One</li>
      <li class="menuItem">Two</li>
      <li class="menuItem">Three</li>
      <li class="menuItem">Four</li>
      <li class="menuItem">Five</li>
      <li class="menuItem">Six</li>
      <li class="menuItem">Seven</li>
    </ul>
  </div>
</div>​

メニュー項目を幅全体に均等に分散させるために、UL では「display: table」を使用し、リスト項目では「display: table-cell」を使用しました。「border-spacing:3px 0px;」を使用して、各セル間にスペースを作成しようとしました。

.mainContainer {
    width: 960px;
    margin: 0 auto;
    background-color:#999;
    height:100px;
}
.menu {
    list-style-type: none;
    border-spacing:3px 0px;
    padding: 0px;
    display: table;
    margin: 5px 0px 0px;
    text-align:center;
    height: 26px;
    width: 960px;

}
.menuItem {
    background-color: #eee;
    display: table-cell;
    position: relative;
    margin:0px 5px 0px 0px;
    padding:6px 0px;
    width: auto;
    cursor: default;
    color: #002F68;
}​

ただし、最初のメニュー項目の左側にスペースを入れたり、最後の項目の右側にスペースを入れたりしたくありません。これらのスペースを削除するにはどうすればよいですか? IE8+ との互換性が必要です。

jsFiddle の完全な例

4

2 に答える 2

3

これがフィドルです。

メニュー全体にボーダー間隔を設定する代わりに、リスト項目にボーダー属性を使用します。

.menu {
    list-style-type: none;
    /*border-spacing:3px 0px;*/  <-----remove this
    padding: 0px;
    display: table;
    margin: 5px 0px 0px;
    text-align:center;
    height: 26px;
    width: 960px;

}

.menuTab {
    background-color: #D2DCE0;
    display: table-cell;
    position: relative;
    margin:0px 5px 0px 0px;
    padding:6px 0px;
    width: auto;
    cursor: default;
    color: #002F68;
    border-left: 3px solid #999;  <-----Add this
}

次に、左端の境界線を修正するために、この疑似セレクターを追加します (ie8 互換):

.menuTab:first-child{
     border-left: none;   
}
于 2013-01-04T16:07:25.343 に答える
0

最も一般的な解決策は、リストの最初と最後の要素に対して2 つの CSS クラスfirstを作成することです。lastあなたの場合：

<div class="mainContainer">
  <div>
    <ul class="menu">
      <li class="menuItem first">One</li>
      <li class="menuItem">Two</li>
      <li class="menuItem">Three</li>
      <li class="menuItem">Four</li>
      <li class="menuItem">Five</li>
      <li class="menuItem">Six</li>
      <li class="menuItem last">Seven</li>
    </ul>
  </div>
</div>

次に、このクラスを使用します。

.menu .first{
margin-left:0;
}
.menu .last{
margin-right: 0;
}
于 2013-01-04T16:06:53.307 に答える