DIV中嵌套UL，UL使用浮动DIV高度不自动增长
本人在DIV中嵌套了一个UL。DIV使用了背景，（此时DIV根据UL内容的大小自动增长高度）但是等我把里面的UL使用浮动后，DIV就不显示了，除非手动调整DIV的高度。我...
本人在DIV中嵌套了一个UL。DIV使用了背景，（此时DIV根据UL内容的大小自动增长高度）但是等我把里面的UL使用浮动后，DIV就不显示了，除非手动调整DIV的高度。我需要的结果是DIV根据UL内容的大小自动增长高度谢谢。满意给分！！复制党，新手请为高手靠站边谢谢。我需要能简介的直接的解决方案。奉上页面源代码。<style type="text/css">* { margin:0px; padding:0px;}.top { width: 250px; background-color: #CCC; margin-top: 10px; margin-left: 200px;}.top li { float: left; list-style-type: none;}</style></head><body><div class="top"> <ul> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> <li>abcde</li> </ul></div>（以上是使用浮动后的结果）（以上是我需要的结果）最后在说一边是DIV根据UL内容的大小多少自动增长高度谢谢
展开
3个回答
展开全部
除了手动设置高度外，你可以在div上也加一个浮动float: left;就能解决了，或者是加一个 overflow:hidden;也可以解决
给你写一个案例好了
<style type="text/css">
body{ margin:0; padding:0;}
.box{ width:607px; margin:0 auto; overflow:hidden;}
.box ul{ float:left; list-style-type:none; margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; line-height:24px; border-left:1px solid white; border-top:1px solid white;}
.box ul li{ float:left; width:100px; text-align:center; background:#eaeaea; white-space:nowrap; border-right:1px solid white; border-bottom:1px solid white; cursor:pointer;}
.box ul li:hover{ float:left; width:100px; text-align:center; background:#ccc; white-space:nowrap; border-right:1px solid white; border-bottom:1px solid white; cursor:pointer;}
</style>
<div class="box">
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
</div>
给你写一个案例好了
<style type="text/css">
body{ margin:0; padding:0;}
.box{ width:607px; margin:0 auto; overflow:hidden;}
.box ul{ float:left; list-style-type:none; margin:0; padding:0; font:12px Arial, Helvetica, sans-serif; line-height:24px; border-left:1px solid white; border-top:1px solid white;}
.box ul li{ float:left; width:100px; text-align:center; background:#eaeaea; white-space:nowrap; border-right:1px solid white; border-bottom:1px solid white; cursor:pointer;}
.box ul li:hover{ float:left; width:100px; text-align:center; background:#ccc; white-space:nowrap; border-right:1px solid white; border-bottom:1px solid white; cursor:pointer;}
</style>
<div class="box">
<ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ul>
</div>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
