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

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

任何人都得到了一个很好的解决方案呢？

来源

2012-09-08 David

我不知道我是否正确理解你的问题，但也许尝试做float：留在你的li元素而不是做display：table和display：table-cell？这样，它们仍然是水平排列的，但是你可以在每个li和它的内容的填充上做个别的样式。

来源

2012-09-08 23:33:42 rosalindwills

您需要创建其他两种样式：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-09 00:02:14 Taylor

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

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-09 01:00:09 cimmanon

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

回答

相关问题