Question

我有一个使用无序列表创建的水平菜单。菜单包含在固定宽度的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 +兼容性。

Full example in jsFiddle

Answer 1

Here's a fiddle.

而不是整个菜单上的边框间距，请使用列表项上的border属性：

.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;   
}

Answer 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;
}

表格单元格的第一个和最后一个间距

2 个答案: