将两个<p>元素对齐在同一行中

Question

这是演示.

我想将两个<p>元素对齐在同一行,但你可以看到第二个元素向下移动了一点.谁知道原因？

HTML

<div class="logo">
    <p>Hello world</p>
    <p class="web_address">Hello all</p>
</div>

CSS

.logo p {
    margin:0;
    padding:0;
    border: solid 1px black;
    margin-left: 20px;
    font-size: 36px;
    display: inline-block;
    line-height: 80px;
}

Answer 1

默认情况下,内联(块)元素(本例中的段落)在其基线中垂直对齐.您可以添加vertical-align: top;以修复对齐问题.

更新了演示.

.logo p {
    /* other styles goes here... */
    display: inline-block;
    vertical-align: top;
}

有关详细信息,请参阅此答案.