1

タイトルのように-水平メニューの最後の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>
4

2 に答える 2

4

単に追加するだけです

.last { 
    float: none;
}

表示がブロックに設定されているため、全体が可能な限り広くなります。

または、ulの背景色を設定することもできます。

アップデート

解決策は完全に機能しません。これは、完全なulにまたがるからです。

修正は実際には非常に簡単です。

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

更新されたjsfiddleを参照してください：http：//jsfiddle.net/BsrLD/8/

于 2013-01-16T15:22:57.477 に答える
2

あなたは最後の李でフロートを脱ぐことができます、そしてそれは私があなたが望むと思う結果を与えます。
.last{float:none}

あなたはこのフィドルで見ることができます

于 2013-01-16T15:23:57.070 に答える