html - 在 Angular 模板中对齐 2 个 block

Question

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

<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 block 中的第一个 li 元素与左侧的第一个 li 元素不一致。看起来 li 元素更像是从容器 div 的底部对齐。我该如何扭转这种局面？

Answer 1

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