在角度模板中对齐2个<ul>块

Question

我想对齐两个ul块。目前我让它们彼此相邻但它们从底部排列，而不是从顶部排列：

<div class="ingredients-container">
  <div style="display: inline-block; width: 15em">
    <ul>
      <li ng-repeat="...">
       {{ ... }}
      </li>
    </ul>
  </div>
  <div style="display: inline-block; width: 15em">
   <ul>
     <li ng-repeat="...">
       {{ ... }}
     </li>
   </ul>
  </div>
</div>

右侧ul区块中的第一个li项目不会与左侧的第一个li项目一致。似乎li项目正在从容器div的底部对齐。我该怎么扭转这个？

Answer 1

对于display: inline-block包装器元素，请指定vertical-align: top以使它们对齐