％ul的絕對位置，在裏面？

我正在建立一個導航菜單，我使用的是常規的ul#nav。％ul的絕對位置，在裏面？

在我的示例波紋管中，我試圖讓li#third內的div掛在ul#nav的底部。我知道我需要在li#third的div上使用position: absolute，但如果我這樣做，那麼它只佔用分配給它的100％的寬度。

我試着改變position: absolute; width: 40%;的div，但最後li幻燈片下。

我怎樣才能保持寬度與li#third相同，並仍然在底部流過它？

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; }

來源

2012-05-11 Dejan.S

一遍又一遍地讀，但每次你的問題仍然是一樣的。 – khurram

對於記錄，你不應該在你的jsfiddle中使用''id's''作爲'id'只能在頁面上出現一次。 – tw16

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

現在我明白你想要做什麼了，這很有道理。

我在ul#nav上刪除了overflow: hidden，我假設在那裏包含浮點數，並將其替換爲display: inline-block。我也可以使用clearfix。

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

我加了left: 0到div#search純粹是爲了修復IE7。

來源

2012-05-11 13:34:36 thirtydot

我粗略地做了同樣的事情，但後來我意識到我認爲他想要第三個項目有效地掛在ul的底部。同樣在你的例子中，第四個「li」是隱藏的。 – tw16

是的，我想讓它掛在第三。就像上面的例子，其中一些像素高於其餘像素，它就是我想要「流過」 –

@ Dejan.S：所以，您只設置了'position：absolute'，這樣第三個'li'就可以「掛起超過「ul'的底部？ – thirtydot

li{ overflow: hidden; 
     position: relative;}

來源

2012-05-11 13:38:14 ShibinRagh

％ul的絕對位置，在裏面？

回答

相關問題