0

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

在下面的示例中，我试图使 div 内的 divli#third悬在ul#nav. 我知道我需要position: absolute在里面的 div上使用，li#third但如果我这样做，那么它只会占用分配给它的 100% 的宽度。

我尝试更改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; }
4

2 回答 2

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纯粹是为了修复 IE7。

于 2012-05-11T13:34:36.430 回答
0 
li{ overflow: hidden;
        position: relative;}
于 2012-05-11T13:38:14.980 回答