ul li内の％幅の絶対位置？

Question

私は通常のul#navを使用するナビゲーションメニューを構築しています。

私の例では、li#third内のdivをul#navの末尾にハングアップさせようとしています。私はposition: absoluteをli#third内のdivに使用する必要があることを知っていますが、それを行うと、割り当てられた幅の100％を占めます。

私はdivのposition: absolute; width: 40%;を変更しようとしましたが、最後に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に削除しました。フロートを含むと仮定して、display: inline-blockに置き換えました。私もclearfixを使用している可能性があります。

position: relative; height: 1px;~ul#nav li#thirdを追加しました。 heightが必要で、それ以外の場合はliが3番目のものになります。 position: relativeには、絶対配置されたdiv#searchが含まれています。

私は純粋にIE7を修正するためにleft: 0~div#searchを追加しました。

Answer 2

li{ overflow: hidden; 
     position: relative;}