blocks|key|307122|text|您可以在无序列表元素上使用clearfix技术。请注意，此技术依赖于CSS生成的内容(:before、:after)，因此只能与IE8%2B一起使用。其他现代浏览器就可以了。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|307123|根据包装器的上下文，浮动包装器可能会破坏您的设计，也可能不会。这项技术将允许您在不浮动的情况下扩展包装器div。|307124|.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;
+}|code-block|syntax|javascript|307125|工作示例的Here+is+a+jsfiddle。红色背景是故意添加的。|307126|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/remibreton/DajuR/^0|17|7|1F|6|0|1G|3|0|0|5|I|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

You can use the clearfix technique on your unordered list element. Be aware that this technique relies on CSS generated content (<code>:before</code>, <code>:after</code>) and therefore will only work with IE8+. Other modern browsers will be fine.

Depending on the context of your wrapper, floating the wrapper may or may not break your design. This technique will allow you to stretch your wrapper <code>div</code> without floating it.

<pre><code>.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;
 }
</code></pre>

<a href="http://jsfiddle.net/remibreton/DajuR/" rel="nofollow">Here is a jsfiddle</a> of a working example. The red background has been added on purpose.

blocks|key|4137356|text|当您在内部元素上使用float:+left时，您需要做一些将导致外部元素清除浮动元素的操作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4137357|虽然有几种方法可以做到这一点，但本例中最简单的方法是在.post-wrapper+ul元素上使用overflow:+hidden：|4137358|.post-wrapper+ul{
+++margin:0;
+++padding:0;
+++width:200px;
+++overflow:+hidden;
+}|code-block|syntax|javascript|4137359|entityMap^0|A|B|0|R|G|1C|G|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

When you use <code>float: left</code> on inner elements, you need to do something that will cause the OUTER element to clear the floated elements.

While there are a few ways to accomplish this, the simplest method in this case would be to use <code>overflow: hidden</code> on the <code>.post-wrapper ul</code> element:

<pre><code>.post-wrapper ul{
 margin:0;
 padding:0;
 width:200px;
 overflow: hidden;
 }
</code></pre>

blocks|key|4137404|text|您的问题可能是li元素上的div尝试:+1.将position:relative添加到包装器容器中2.在包装器底部添加一个清除div|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4137405|<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%25"></div>
+</ul>
</div>|code-block|syntax|javascript|4137406|4137407|从li|ordered-list-item|4137408|中删除浮动|4137409|entityMap^0|N|H|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|W|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

Your problem may be the <code>float:left</code> on the li element
Try:
1. add <code>position:relative</code> to the wrapper container
2. add a clearing div to the bottom of the wrapper

<pre><code>&lt;div class="post-wrapper"&gt;
 &lt;ul&gt;
 &lt;li&gt;Item-1&lt;/li&gt;
 &lt;li&gt;Item-2&lt;/li&gt;
 &lt;li&gt;Item-3&lt;/li&gt;
 &lt;li&gt;Item-4&lt;/li&gt;
 &lt;li&gt;Item-5&lt;/li&gt;
 &lt;li&gt;Item-6&lt;/li&gt;
 &lt;li&gt;Item-7&lt;/li&gt;
 &lt;div style="clear:both; width:100%"&gt;&lt;/div&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<ol>
<li>remove float from li</li>
</ol>

blocks|key|3655777|text|将你的ul和div都放在左边，这应该可以解决这个问题。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3655778|下面是一个演示：http://jsfiddle.net/sCAdj/|3655779|另一种方法是添加一个清除浮动的虚拟列表项：|3655780|<li+style="float:none;clear:left"></li>|code-block|syntax|javascript|3655781|演示：http://jsfiddle.net/sCAdj/1/|3655782|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sCAdj/|1|http://jsfiddle.net/sCAdj/1/^0|3|2|6|3|0|8|Q|0|0|0|0|3|S|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1A|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|Q|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]]]

Float both your <code>ul</code> and your <code>div</code> left, that should resolve the issue. 

Here is a demonstration: <a href="http://jsfiddle.net/sCAdj/" rel="nofollow">http://jsfiddle.net/sCAdj/</a>

The other approach is to add a dummy list item that clears the float:

<pre><code>&lt;li style="float:none;clear:left"&gt;&lt;/li&gt;
</code></pre>

Demonstration: <a href="http://jsfiddle.net/sCAdj/1/" rel="nofollow">http://jsfiddle.net/sCAdj/1/</a>

My wrapper div css;

<pre><code>.post-wrapper{
 width:200px;
 min-height:50px;
 }
</code></pre>

ul list css for .post-wrapper;

<pre><code>.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; 
 }
</code></pre>

HTML

<pre><code>&lt;div class="post-wrapper"&gt;
 &lt;ul&gt;
 &lt;li&gt;Item-1&lt;/li&gt;
 &lt;li&gt;Item-2&lt;/li&gt;
 &lt;li&gt;Item-3&lt;/li&gt;
 &lt;li&gt;Item-4&lt;/li&gt;
 &lt;li&gt;Item-5&lt;/li&gt;
 &lt;li&gt;Item-6&lt;/li&gt;
 &lt;li&gt;Item-7&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

There is no problem for 5 list item (li) but after 5 post-wrapper don't stretch. How can solve this problem?

How can I stretch wrapper div according to ul list?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

问如何根据ul list扩展包装器div？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何根据ul list扩展包装器div？EN