html - 两个容器的 float 问题

Question

我有这个标记:

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

屏幕的宽度足以在一行中显示 5 个框，但是当我向左浮动时，整个容器 2 在容器 1 的下方

如何让屏幕上的第一行显示方框 1 到 5 和第二行方框 6(好像所有的 lis 都在一个容器内并向左浮动)同时将 lis 保持在两个不同的容器内？

谢谢

Answer 1

给 ul 元素 display: inline 和 li 元素 display: inline-block

参见此处:http://jsfiddle.net/hW7Aj/1/

HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li> 
</ul>
<ul>
    <li>4</li>
    <li>5</li>
    <li>6</li> 
</ul>

CSS

ul {
    display: inline;
}

li {
    display: inline-block;
    width: 80px;
    border: 1px solid black;
}