我正在构建一个导航菜单,我使用常规ul#nav
。
在我的示例中,我正试图让li#third
内的div悬挂在ul#nav
的底部。我知道我需要在position: absolute
内的div上使用li#third
,但如果我这样做,那么它只占用分配给它的宽度的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; }
答案 0 :(得分:1)
请参阅: http://jsfiddle.net/thirtydot/VyHJR/34/
现在我明白你要做什么,这是有道理的。
我在overflow: hidden
上删除了ul#nav
,我认为其中包含了浮点数,并将其替换为display: inline-block
。我也可以使用clearfix。
我将position: relative; height: 1px;
添加到ul#nav li#third
。需要一些height
,否则第四个li
取代第三个position: relative
。 div#search
包含绝对定位的left: 0
。
我将div#search
添加到{{1}}纯粹是为了修复IE7。
答案 1 :(得分:0)
li{ overflow: hidden;
position: relative;}