ul不在div容器内部。

Question

ul不在div容器内部。

4

为什么我的容器没有背景色变成红色，ul也不在div容器内？

样式：

#container {
            width:1000px
            }

#categoryorder {
            float:left;
            width:500px;
            margin:0 0 0 50px;
            display:inline;
            list-style-type:none
}

#categoryorder li {
            color:#003366;
            font-size:20px;
            float:left;
            width:196px;
            background-color:#fcfcfc;
            border: 2px solid #dddddd;
            margin:0 50px 50px 0;
            line-height:50px;
            text-align:center;
            display:inline;
            cursor:move
}

HTML：

<div id="container" style="background-color: red;">
     <ul id="categoryorder">
         <li id="ID_1">1</li>
         <li id="ID_2">2</li>
         <li id="ID_3">3</li>
         <li id="ID_4">4</li>
         <li id="ID_5">5</li>
         <li id="ID_6">6</li>
         <li id="ID_7">7</li>
         <li id="ID_8">8</li>
     </ul>
</div>

- dev.nikolaz

http://jsfiddle.net/vrVAP/84/ - dev.nikolaz

5个回答

6

当你浮动子元素时，实际上是将它们从文档流中移除，容器元素的高度也会缩小到零。将#container div添加overflow:auto;可以恢复你需要的行为。

#container {
    width:1000px;
    overflow:auto;
}

jsFiddle实例

请注意，此答案不需要任何额外的（非语义化的）div即可获得所需结果。

- j08691

4

您正在浮动元素，需要将overflow: hidden添加到父容器中以恢复高度。使用此方法，您无需向流中添加额外的div。

#container {
            width:1000px; overflow: hidden;
            }

http://jsfiddle.net/saUp7/1/

- user934902

最后我终于明白为什么我的浮动内容会导致包含它的 DIV 收缩了... :-) 但是使用 overflow: hidden 或 auto 有什么区别呢？根据 @j08691 的回答，auto 也可以起到同样的作用。 - Fabricio

1

在这种情况下，它们都表现得相似，并且只清除浮动。overflow:hidden将隐藏额外的内容，但仅在有固定高度的情况下。 - user934902

1

把你的 float:left 改成 display:inline-block;

Css：

#categoryorder {
     width:500px;
     margin:0 0 0 50px;
     display:inline-block;    /*from float:left; to display:inline-block; */
     list-style-type:none;
}

演示

- Carl0s1z

1

只需使用display:inline-block代替（并添加vertical-align: top以获得更好的外观）。

浮动是用于从流中切割块的，所以这是正常行为：您没有非浮动块内部，因此流接近于无。

内联块在流中，所以它会起作用。

还有一个内联块的技巧：记住空格！如果它们在源代码中，则块内会有小间距，因此请注释您的缩进

某物
另一件事
(查看源代码)

- Tim Marinin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- George · Accepted Answer

由于您浮动了所有元素，而没有清除它们。创建一个清除类，然后在底部添加一个元素： HTML

<div id="container" style="background-color: red;">
     <ul id="categoryorder">
         <li id="ID_1">1</li>
         <li id="ID_2">2</li>
         <li id="ID_3">3</li>
         <li id="ID_4">4</li>
         <li id="ID_5">5</li>
         <li id="ID_6">6</li>
         <li id="ID_7">7</li>
         <li id="ID_8">8</li>
     </ul>
    <div class="clr"></div>
</div>

CSS

.clr{
    clear:both;
    font-size:0;
}

JSFiddle