ul不在div容器内

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;到您的#containerdiv以恢复您寻求的行为.

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

jsFiddle例子

请注意,此答案不需要任何额外的(非语义)div来获得所需的结果.