1

我的包装器 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

4 回答 4

0

您可以在无序列表元素上使用 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;
 }

这是一个工作示例的jsfiddle。红色背景是故意添加的。

于 2012-11-26T15:12:47.250 回答
0

当你float: left在内部元素上使用时，你需要做一些事情，这会导致 OUTER 元素清除浮动元素。

虽然有几种方法可以实现这一点，但在这种情况下，最简单的方法是overflow: hidden在.post-wrapper ul元素上使用：

.post-wrapper ul{
   margin:0;
   padding:0;
   width:200px;
   overflow: hidden;
 }
于 2012-11-26T15:13:04.763 回答
0

浮动你ul和你的div左边，这应该可以解决问题。

这是一个演示：http: //jsfiddle.net/sCAdj/

另一种方法是添加一个清除浮动的虚拟列表项：

<li style="float:none;clear:left"></li>

演示：http: //jsfiddle.net/sCAdj/1/

于 2012-11-26T15:14:16.070 回答
-1

您的问题可能是float:left关于 li 元素尝试：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>
  1. 从 li 中删除浮动
于 2012-11-26T15:14:09.083 回答