0

我有以下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  --------------->

有人对此有很好的解决方案吗？

4

3 回答 3

0

您需要创建几个其他样式：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>
于 2012-09-09T00:02:14.153 回答
0

我不确定我是否正确理解了您的问题，但也许尝试在您的 li 元素上执行 float:left 而不是 display:table 和 display:table-cell? 这样它们仍将水平排列，但您将能够对每个 li 及其内容的填充进行单独的样式设置。

于 2012-09-08T23:33:42.877 回答
0

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

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

或者，您的父容器可以有负边距。如果有可能进行列表换行（例如在移动设备上），我发现这会更好。

ul { margin-left: -10px; margin-right: -10px }
于 2012-09-09T01:00:09.787 回答