Question

我有以下HTML代码：

<body>
<div id='wrapper'>
    <ul id='nav'>
        <li><a href='#'>Link</a></li>
        <li><a href='#'>Link</a></li>
        <li><a href='#'>Link</a></li>
        <li><a href='#'>Link</a></li>
    </ul>
</div>

以下CSS代码：

#wrapper {width:960px; margin:0 auto;}

#nav {display: table;width:100%;}
#nav li {display: table-cell;}
#nav li a {display: block;text-align: center; border-bottom:1px solid #f00;margin:0 5px; padding:0 0 15px 0;}

此代码生成一个底部为border的水平菜单。

像...这样的东西。

|   Link      Link       Link      Link   |
|_________  _________  _________ _________|
<-----------------  960px  --------------->

我想知道是否可以删除第一个和最后一个项目的空格，以便底部border以第一个链接的第一个字母和最后一个链接的最后一个字母的垂直线开始。有点像...

|Link         Link       Link         Link|
|______     ________   ________     ______|
<-----------------  960px  --------------->

任何人都有一个很好的解决方案吗？

Answer 1

我不确定我是否正确理解你的问题，但也许可以尝试浮动：留在你的li元素而不是显示：table和display：table-cell？这样他们仍然会水平排列，但你可以在每个li及其内容的填充上做个性化的造型。

Answer 2

您需要创建其他几个样式：firstElement，lastElement。并且对待它们有点不同

    <li id='firstElement'><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
    <li id='lastElement'><a href='#'>Link</a></li>

Answer 3

一种解决方案是定位列表的第一个和最后一个孩子。

ul li:first-child a { margin-left: 0 }
ul li:last-child a { margin-right: 0 }

或者，您可以在父容器上设置负边距。如果列表包装的可能性（例如在移动设备上），我发现这更好用。

ul { margin-left: -10px; margin-right: -10px }

未排序的列表显示为表格，但删除第一个和最后一个项目的空格

3 个答案: