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

由于它们是行内 block ，您需要调整垂直对齐方式。

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

CSS

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