使用水平滚动条正确对中元素

Question

我有一个div元素列表，它们用水平滚动条显示。

这些div中的所有元素都是（水平）居中，这很好，但它们没有正确对齐

我有以下结构

<div>
  <div>
    <img />
    <p />
  </div>
  <div>
    <img />
    <p />
  </div>
</div>

http://jsfiddle.net/kSnq4/

如果你看看jsFiddle，你会看到问题所在。所有元素都应与顶部对齐。

我这样做是对的吗？如果是这样，我该怎么做才能解决它？

Answer 1

您可以使用vertical-align: top;，因为您使用的是display：inline-block;

示例：http://jsfiddle.net/kSnq4/2/

Answer 2

您需要将vertical-align: top;添加到列表项中。如果您想阻止垂直滚动条，请将overlfow-y: hidden;添加到.templateList。

.templateList .listItem{
    width:120px;
    text-align:center;
    display:inline-block;
    vertical-align: top;
}

DEMO