html - 多个UL不同等级

Question

我对两个 UL 的位置有疑问。我希望两个 UL 处于同一水平。如下图所示，第一个 UL 列表在下方，而第二个在顶部。我能够在 jsfiddle 上重新创建它。

链接：http: //jsfiddle.net/5krJU/

我能够弄清楚问题是因为第二个列表比第一个列表有更多的 li，但我无法修复它。

我当前的 css 如下所示：

#container {text-align: center; display:block;}
#container > ul { color:#776; display:inline-block; width:360px; list-style-type: none;}

我的html是这样的：

<div id="container">
 <ul>
    <li>item</li>
    <li>item</li>
 </ul>
 <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
 </ul>
</div>

这是它的图片：

更新

我找到了答案。

解决方案是添加 'vertical-align: top;' 到 ul 的。

请关闭这个问题。

很抱歉给您带来不便。

Answer 1

由于它们是内联块，因此您需要调整垂直对齐方式。

http://jsfiddle.net/5krJU/1/

CSS

#container > ul {
  color:#776;
  display:inline-block;
  width:60px;
  list-style-type: none;
  vertical-align: top
}

Answer 2

基本上，你只需要float: left列表。这个JSFiddle应该让一切都清楚。干杯!