CSS困惑100％。需要三个块才能相互粘连

Question

我正在使用包含三个项目<ul>的{​​{1}}块来构建导航区域。

<li>块没有固定宽度。它适合其父母。 我需要所有<ul> s水平对齐，内部彼此相邻。 总共有三个<li>个。 最后两个有固定的宽度。 第一个应该尽可能多地占用空间。

我该如何构建这个？当我使用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嵌套？

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

Answer 3

display: table使用UL，display: table-cell使用LI。