如何根据ul list扩展包装器div？
如何根据ul list扩展包装器div？
提问于 2012-11-26 23:01:25
我的包装器div css；
.post-wrapper{
width:200px;
min-height:50px;
}.post-wrapper的ul列表css；
.post-wrapper ul{
margin:0;
padding:0;
width:200px;
}
.post-wrapper ul li{
margin-bottom:2px;
padding:0;
list-style:none;
text-align:center;
width:200px;
float:left;
}HTML
<div class="post-wrapper">
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
<li>Item-6</li>
<li>Item-7</li>
</ul>
</div>对于5个列表项(li)没有问题，但是在5个后包装器之后就不能伸展了。如何解决这个问题？
回答 4
Stack Overflow用户
回答已采纳
发布于 2012-11-26 23:14:09
您的问题可能是li元素上的div尝试: 1.将position:relative添加到包装器容器中2.在包装器底部添加一个清除div
<div class="post-wrapper">
<ul>
<li>Item-1</li>
<li>Item-2</li>
<li>Item-3</li>
<li>Item-4</li>
<li>Item-5</li>
<li>Item-6</li>
<li>Item-7</li>
<div style="clear:both; width:100%"></div>
</ul>
</div>- 从li
中删除浮动
Stack Overflow用户
发布于 2012-11-26 23:12:47
您可以在无序列表元素上使用clearfix技术。请注意，此技术依赖于CSS生成的内容(:before、:after)，因此只能与IE8+一起使用。其他现代浏览器就可以了。
根据包装器的上下文，浮动包装器可能会破坏您的设计，也可能不会。这项技术将允许您在不浮动的情况下扩展包装器div。
.post-wrapper ul {
margin: 0;
padding: 0;
width: 200px;
}
.post-wrapper ul:after {
content: ".";
overflow: hidden;
display: block;
text-indent: -9999px;
height: 0;
clear: both;
visibility: hidden;
}工作示例的Here is a jsfiddle。红色背景是故意添加的。
Stack Overflow用户
发布于 2012-11-26 23:13:05
当您在内部元素上使用float: left时，您需要做一些将导致外部元素清除浮动元素的操作。
虽然有几种方法可以做到这一点，但本例中最简单的方法是在.post-wrapper ul元素上使用overflow: hidden：
.post-wrapper ul{
margin:0;
padding:0;
width:200px;
overflow: hidden;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13567447
复制相关文章
相似问题
腾讯云开发者
