html – 从顶部开始并排排列两个无序列表

我有两个uls在不同的div中彼此相邻：

DIV {
显示：内联块;
宽度：320像素;
}

<div>
    <ul>
    <li>line 1</li>
    <li>line 2</li>
    </ul>
</div>

  <div>
    <ul>
    <li>line 1</li>
    <li>line 2</li>
    <li>line 3</li>
    <li>line 4</li>
    <li>line 5</li>
    </ul>
  </div>

当两者相邻并且具有相同数量的元素时,这看起来很好,但具有最小项目数的div被推到底部并且看起来非常不对齐.我不确定如何确保顶部div或其顶部对齐,以便子元素等不会出现在底部.

编辑：jsfiddle链接：https://jsfiddle.net/v0bzkhqq/

它看起来像使用vertical-align：text-top;会工作..所以我现在感觉很慢.

解决方法

你可以浮动：离开无序列表并仍然为它们设置宽度.

div {
    float: left;
    width: 320px;
}

这是一个fiddle

更新：

您还可以添加vertical-align：top;如果你想保持显示：inline-block;

div {
    display: inline-block;
    width: 320px;
    vertical-align: top;
}

Fiddle link