Question

我正在构建一个导航菜单，我使用常规ul#nav。

在我的示例中，我正试图让li#third内的div悬挂在ul#nav的底部。我知道我需要在position: absolute内的div上使用li#third，但如果我这样做，那么它只占用分配给它的宽度的100％。

我尝试更改div上的position: absolute; width: 40%;，然后更改其下的最后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; }

Answer 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。

Answer 2

li{ overflow: hidden;
        position: relative;}

绝对位置有％宽度，在ul li里面？

2 个答案: