Question

为什么我的容器不是背景颜色红色而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>

Answer 1

因为您将所有元素都悬浮在其中，而不清除它们。创建一个清晰的类，然后在底部添加一个元素：

<强> 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

Answer 2

当您浮动子项时，您基本上将它们从文档流中移除，并且容器元素的高度缩小为空。将overflow:auto;添加到#container div以恢复您寻找的行为。

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

<强> jsFiddle example

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

Answer 3

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

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

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

Answer 4

将您的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;
}

<强> DEMO

Answer 5

只需使用display：inline-block（并添加vertical-align：top以获得更好的效果）。

Float设计用于从流动中切割块，因此它是正常行为：内部没有非浮动块，因此流量几乎没有。

内联块正在流动，因此它可以工作。

对于内联块只有一个技巧：记住空格！如果它们在源代码中，则块内的边距会很小，所以只需注释你的缩进

东西

另一个
（查看来源）

ul不在div容器内

5 个答案: