Question

我有两个uls在不同的div中彼此对齐：

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

<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或其ul在顶部对齐，以便子元素等不会出现在底部。

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

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

Answer 1

您可以var functions = { f1: function () { console.log("f1"); }, f2: function () { console.log("f2"); }, f3: function () { console.log("f3"); } } // ... var x = $("ul").find("li.active").data("number"); functions["f" + x]();无序列表并仍为其设置宽度。

float: left

这是fiddle

更新：

如果您想保留div { float: left; width: 320px; }

，还可以添加vertical-align: top;

display: inline-block;

Fiddle link

Answer 2

我在div中添加了“vertical-align：top”，这样就可以了。

从顶部开始并排对齐两个无序列表

2 个答案: