在ul里有％寬度的絕對位置？

Question

我正在構建一個導航菜單，在其中使用常規ul#nav 。

在我的例子婁我試圖讓里面的DIV li#third在底部掛ul#nav 。 我知道我需要在li#third內的div上使用position: absolute ，但是如果我這樣做的話，它只占用分配給它的寬度的100％。

我嘗試更改position: absolute; width: 40%; position: absolute; width: 40%; 在div上，但最后一個li在其下滑動。

如何保持寬度與li#third元素相同，並且仍然在底部上方流動？

更新的示例： http : //jsfiddle.net/VyHJR/24/

HTML：

<ul id="nav">
    <li id="first"><a href="">item</a></li>
    <li id="second"><a href="">item</a></li>
    <li id="third"><div id="search">search</div></li>
    <li id="fourth"><div id="flag"><div id="flag_item">4</div></div></li>
</ul>

CSS：

ul#nav { width: 600px; background-color: #fdd; padding: 0; margin: 30px 0 0 20px; overflow: hidden; }

ul#nav li { float: left; text-align: center; }
ul#nav li a { color: #333333; }

ul#nav li#first { background-color: #dff; width: 20%; padding: 6px 0; }
ul#nav li#second { background-color: #ddf; width: 20%; padding: 6px 0; }
ul#nav li#third { background-color: #dfd; width: 40%; }
ul#nav li#fourth { background-color: #ffd; width: 20%; }

li#third div#search { width: 100%; background-color: #333333; height: 40px; color: #ffffff; }
li#fourth div#flag { width: 100%; height: 20px; background-color: #333333; }
li#fourth div#flag div#flag_item { width: 1px height: 30px; background-color: red; }

Answer 1

參見： http : //jsfiddle.net/thirtydot/VyHJR/34/

現在，我了解了您要執行的操作，這很有意義。

我刪除了ul#nav上的overflow: hidden在ul#nav ，我認為在那里包含浮點數，然后將其替換為display: inline-block 。 我也可以使用clearfix 。

我添加了position: relative; height: 1px; position: relative; height: 1px; ul#nav li#third 。 需要一定的height ，否則第四li代替第三李。 position: relative對於包含絕對定位的div#search 。

我在div#search添加left: 0純粹是為了修復IE7。

Answer 2

li{ overflow: hidden;
        position: relative;}