Html 两个集装箱的浮动问题

我有这个标记：

div#wrapper
  ul#container1
    li#box1
    li#box2
    li#box3
  ul#container2
    li#box4
    li#box5
    li#box6

屏幕的宽度足以在一行显示5个框，但当我离开uls时，整个容器2低于容器1

如何将屏幕上的第一行显示框1至5和第二行显示框6（好像所有lis都在一个容器内并向左浮动）保持在两个不同的容器内

---

感谢可能有了这样的标记，您就不能这样做了，因为如果您将

ul

和

li

浮动到左侧，您将拥有每个

ul

作为浮动元素的容器，并且您没有足够的空间来放置第2个浮动

ul

元素。这就是您将第二个

ul

包装到新行的原因

---

您可以通过将所有浮动元素放置在一个容器下来解决此问题。

给出

ul

元素

display:inline

和

li

元素

display:inline块

请看这里：

HTML

对于html：

 <div>
    <ul class="li1">
        <li>c</li>
        <li>c</li>    
        <li>c</li>
    </ul>

    <ul class="li1">
        <li>c</li>
        <li>c</li>    
        <li id="last">c</li>
    </ul>
 </div>

---

您需要两个CSS规则：

ul.second li:nth-child(3)
{
    clear: both;
}

li {         
    float: left;
} 

HTML

---

你能显示你的详细代码吗？你能为ul#container1指定填充吗？@kapillohakare:不，不填充你能编辑标记吗？为什么要显示内联和浮动？你的CSS选择器：

li{display:inline；float:left；}

不需要两个float:left；和显示：内联；选择一个：）是的，我们可以使用display:inline一次，但是float:left是必需的。工作正常，但是更宽的屏幕呢？然后第六里也会浮到第一排。@RunningTurtle不客气！：）@-凯勒斯文奥克斯我想这就是OP想要的，不是吗？

 <div>
    <ul class="li1">
        <li>c</li>
        <li>c</li>    
        <li>c</li>
    </ul>

    <ul class="li1">
        <li>c</li>
        <li>c</li>    
        <li id="last">c</li>
    </ul>
 </div>

    .li1 {
        display: inline;
    }

    #last {
        clear: both;
    }
    li {
        display: inline;
        float: left;
    }

ul.second li:nth-child(3)
{
    clear: both;
}

li {         
    float: left;
} 

<ul>     
    <li>1</li>     
    <li>2</li>     
    <li>3</li>  
</ul>
<ul class="second">
    <li>4</li>     
    <li>5</li>     
    <li>6</li>  
</ul>

<ul>     
    <li>1</li>     
    <li>2</li>     
    <li>3</li>  
</ul>
<ul<
    <li>4</li>     
    <li>5</li>     
    <li class="myLi">6</li>  
</ul>

li.myLi    {
    clear: both;
}

li {         
    float: left;
}