在水平菜单中拉伸最后一个li，直到菜单结束 [英] stretch the last li in horizontal menu till end of menu

问题描述

在标题中 - 我想在水平菜单中拉伸最后一个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 =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< li>< a href =＃>链接< / a>< / li& 
< li class =last>< / li> 
< / ul>< / div> 
  

解决方案

只需添加

  .last {
 float：none; 
} 
  

和完整的东西将尽可能宽，因为它的显示设置

更新

解决方案无法完美运作，因为它会覆盖整个ul的范围。

修复实际上很简单：

  .last {
 float：none; 
 overflow：hidden; / *添加此* / 
} 
  

jsfiddle： http://jsfiddle.net/BsrLD/8/

As in the title - I want to stretch the last li tag in horizontal menu till end of menu. Here is my code:

#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>

解决方案

Just simply add

.last { 
    float: none;
}

and the complete thing will be as wide as it can because it's display is set to block.

Alternately you could just set the background-color of the ul.

UPDATE

The solution doesn't work perfectly, as it does span the li over the complete ul.

The fix is actually pretty simple:

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

See updated jsfiddle: http://jsfiddle.net/BsrLD/8/

这篇关于在水平菜单中拉伸最后一个li，直到菜单结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！