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。

修复实际上非常简单：

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

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

Answer 2

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

您可以在此FIDDLE

中看到

在水平菜单中拉伸最后一个li直到菜单结束

2 个答案: