内联块不在同一行上

Question

我有一个非常奇怪的问题。当我遇到对齐问题时，我实际上创建了一个JSFiddle来回答另一个问题。只创建两个内联块元素会导致一个非常奇怪的情况，即左块被按下约40px。

我知道这在Chrome和Firefox中都存在问题（在Mac上，不确定Windows）。

亲眼看看：JSFiddle

我所拥有的是两个自定义元素，我调用<cell>包含一个标题，保存在<t>中，并在<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;
}

---

结果：

Answer 1

您需要指定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