css - 将水平菜单中的最后一个 li 拉伸到菜单末尾

Question

如标题所示 - 我想将水平菜单中的最后一个 li 标签拉伸到菜单末尾。这是我的代码：

#menu{width:600px; height:50px; background-color:#666; }
ul{padding:0; margin:0;}
ul li{list-style:none; height:20px;}
li{
float:left;
background-color:#999;
display:block;
padding:10px;
border-right-style:solid;
border-right-width: 1px;
border-right-color: #000;} 



<div id="menu">
<ul id="nav">
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="last"></li>
</ul></div>

Answer 1

只需简单地添加

.last { 
    float: none;
}

并且完整的东西将尽可能宽，因为它的显示设置为阻止。

或者，您可以只设置 ul 的背景颜色。

更新

该解决方案无法完美运行，因为它确实跨越了整个 ul 的 li。

修复实际上非常简单：

.last {
    float: none;
    overflow: hidden;/* Add this */
}

请参阅更新的 jsfiddle：http: //jsfiddle.net/BsrLD/8/

Answer 2

你可以在最后一个 li 上取下浮动，它会给出我认为你想要的结果。
.last{float:none}

你可以在这个FIDDLE中看到