html - CSS 混淆 100%。需要三个方 block 相互粘连

Question

我正在使用 <ul> block 包含三个元素 ( <li> ) 以构建导航区域。

<ul> block 没有固定的宽度。它适合它的 parent 。 我需要所有 <li> 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;}