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

最常见的解决方案是为列表的第一个和最后一个元素创建两个 cssfirst类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 回答