css - 内联块不在同一行

我有一个很奇怪的问题。当我遇到对齐问题时，我实际上是在创建JSFiddle来回答另一个问题。仅创建两个内联块元素会导致非常奇怪的情况，其中左块被下推约40px。
我知道这是Chrome和Firefox都存在的问题（在Mac上，不确定Windows）。
自己看看：JSFiddle
我所拥有的是两个我称为<cell>的自定义元素，它们包含一个标题（保存在<t>中）和一个lipum段落（保存在<cnt>中）。

HTML：

<div align="center">
<cell>
    <t>This is a short title</t>
    <cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>

<cell>
    <t>This is a very very very very very very very chocolate very very very very very very long title</t>
    <cnt>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet adipiscing diam, suscipit commodo augue. In tellus nunc, dapibus eu interdum at, laoreet volutpat est. Duis non mi quis urna malesuada dapibus. Nunc sit amet nulla quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque molestie neque cursus viverra luctus. Mauris ac placerat purus. Aenean vel dictum sem, condimentum pharetra diam. Nunc sed leo et arcu malesuada placerat sit amet nec ipsum.</cnt>
</cell>
</div>

CSS：

cell
{
    display: inline-block;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
}

结果：

最佳答案

您需要指定vertical-align property（例如vertical-align:top;），因为默认值为基线（您可以查看小提琴和图像）。

cell {
    display: inline-block;
    width: 300px;
    height: 400px;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 0;
    vertical-align:top;
}

jsFiddle example

关于css - 内联块不在同一行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22600268/