最後のliをulの残りの幅に拡張しますか？

Question

私はしばらくこれについて困惑しています。ここに私が今持っているものは次のとおりです：

------------------------------------------------------------------------------- 
|     |     |      | 
|  Item 1  |  Item 2  |  Last item  | 
|     |     |      | 
------------------------------------------------------------------------------- 

ここで最後のliはulの一部を占めています。

------------------------------------------------------------------------------- 
|     |     |          | 
|  Item 1  |  Item 2  |    Last item    | 
|     |     |          | 
------------------------------------------------------------------------------- 

私はJavascript（またはJquery）を使用できません。 テキストサイズが変わる可能性があるので、各liの幅を設定する必要はありません。どのくらいのliがあるのか​​わかりません。私は5または3かもしれない。

どのように私はこれを達成するでしょうか？ありがとう。

ここに私のコードのいくつかとjsfiddleです。 ulの残りの部分を拡大するには、より明るい色が必要です。 JSFIDDLE

Answer 1

あなたがするすべての要素が、最後に浮くことができます。また

ul {overflow:auto;} 

でflaotsをクリアし、国境を脱出していないので、完璧％を維持するのを忘れないでください

左。

最後の要素のボックスモデルは、これらの浮動リストの項目の後ろに拡張されます（内容は変わりませんが）。 overflow:hiddenはこの現象を防止します。フロートしたアイテムがページの自然な流れのままであるかのように、最後のフローティングアイテムが終了すると、ボックスモデルが開始されます。

ul, li{ 
 
    margin:0; 
 
    padding:0; 
 
    
 
    list-style-type:none; 
 
} 
 

 
ul li{ 
 
    display: block; 
 
    float:left; 
 
} 
 

 
ul li:last-child{ 
 
    background-color: #ddd; 
 

 
    float:none; 
 
    overflow:hidden; 
 
}

<ul> 
 
    <li>Item</li> 
 
    <li>Item</li> 
 
    <li>I will extend to the end of the page.. No matter how far. I will also not drop beneath my previous items, even if the text in here requires me to span over multiple lines.</li>  
 
</ul>

新しく追加JSFiddleの編集：

JSFiddle

Answer 2

ul>li:last-of-type {width:whatever} 

だから2リーの最後が浮くだろう前には：左、両方の20％を持っているし、最後のものが60％を持つことができます。

ul>li {box-sizing:border-box;}