表格单元格首尾间距

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.

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

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