首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >浮动css后的Div折叠

浮动css后的Div折叠
EN

Stack Overflow用户
提问于 2008-12-16 04:06:11
回答 9查看 40.8K关注 0票数 19

我有一个叫做NAV的div,在NAV里面我有一个5里的UL,我把它放在左边,li的是,但是当我这样做的时候,NAV就会崩溃。我之所以知道这一点,是因为我在NAV周围设置了一个边界,看看它是否会崩溃。下面是一个示例。

collapsed http://img401.imageshack.us/img401/8867/collapsedze4.png

no collapsed http://img71.imageshack.us/img71/879/nocollapsedkx7.png

正如您在第一张图片中看到的,NAV div中的链接漂浮在左侧,顶部的黑色边框是名为NAV的实际div。

在这张图中,你可以看到它有上边框和下边框,并且没有折叠。

下面是我使用的一些html和css。

alt text http://img301.imageshack.us/img301/5514/codejc8.png

代码语言:javascript
复制
#nav #ulListNavi  a  {
    float: left;
}
EN

回答 9

Stack Overflow用户

发布于 2009-11-20 22:42:30

visible以外的任何overflow值添加到容器中:

代码语言:javascript
复制
div#nav { overflow:auto; }

然后添加width以恢复宽度

代码语言:javascript
复制
div#nav { width: 100%; overflow:auto; }
票数 37
EN

Stack Overflow用户

发布于 2008-12-16 04:13:59

一种解决方案是在最后一个浮动锚点之后向元素添加"clear:both“样式,例如:

代码语言:javascript
复制
<div id="nav">
  <ul id="ulListNavi">
    <li><a href="#">Home</a></li>
    <li><a href="#">Search</a></li>
    <li><a href="#">Flowers</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
  <div style="clear:both;"></div>
</div>

这会导致包含元素在关闭包含框之前清除所有浮动元素。

票数 15
EN

Stack Overflow用户

发布于 2008-12-16 04:29:17

这里还有一些清除浮点数的其他选项:

http://www.quirksmode.org/css/clearing.html

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

至于最好的方法,这几乎是一场圣战,纯粹主义者会被额外的div吓坏的,如果你没有被一些额外的标记所困扰,Joshua和AJ建议的添加清除的div将工作得很好,并且是一种可靠的技术,但至少还有17种其他方法可以做到这一点……

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/370432

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档