内联块显示从顶部开始的内容

Question

我需要从顶部开始显示这些列表元素，我不希望它们堆叠到容器的底部。

此处示例：http://jsfiddle.net/4EWrp/

Answer 1

你应该使用

vertical-align: top

Answer 2

只需在vertical-align: top

中添加div.bar即可

.container {
  width: 300px;
}

.bar {
  width: 90px;
  padding: 2px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: top
}

ul {
  list-style: none;
}

<div class="container">
  <div class="bar">
    <ul>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
    </ul>
  </div>
  <div class="bar">
    <ul>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
    </ul>
  </div>
  <div class="bar">
    <ul>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
      <li>-------</li>
    </ul>
  </div>
</div>