html - CSSが100％と混同されています。互いにくっつくために3つのブロックが必要です

Question

ナビゲーション領域を構成するために<ul>、3つのアイテム（ ）を持つブロックを使用しています。<li>

ブロックの<ul>幅は固定されていません。それはその親に合います。すべて<li>のsを水平に並べて、内側で並べて配置する必要があります。全部で3つあります<li>。最後の2つは固定幅です。最初のものは、可能な限り多くのスペースを取る必要があります。

これをどのように構成できますか？最初の幅を100％使用すると、<li>すべてのスペースが必要になります。

ありがとう！

Answer 1

はい、できます。実際、それは非常に簡単です。あなたは親切にあなた自身の質問に答えました。

http://jsfiddle.net/UYW85/

HTML

<ul>
    <li>@Lorem ipsum dolor lorem ipsum dolor</li>
    <li class="n2">number 2</li>
    <li class="n3">number 3</li>    
<ul>

CSS

ul { width:100%; height:100px; }
ul > li { float:left; background-color:#AAA; }
.n2 { width:100px; background-color:#CCC;}
.n3 { width:100px; background-color:#CCC;}

Answer 2

これはあなたの正確な質問にはやり過ぎかもしれませんが、リソースとして-jQuery Nestedをチェックアウトしましたか？

http://suprb.com/apps/nested/

Answer 3

display: tableforULおよびdisplay: table-cellforを使用しLIます。