使两个<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;
}

- Vigor

Answer 1

默认情况下，行内（块）元素（在这种情况下是段落）按照它们的基线垂直对齐。您可以添加vertical-align: top;来解决对齐问题。

更新演示。

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

更多细节请参考此答案。

- Hashem Qolami

Answer 2

可能是更好的解决方案： http://jsfiddle.net/Zxefz/

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

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

.logo .web_address{
    font-size:26px;
}

- Lowkase

Answer 3

以下方法对我有效：

.toptext {
  display: flex;
  align-items: center;
}

<div class="toptext">
  <p>Please ensure all original documents requested are enclosed</p>
  <p id="right">Claim Reference No.: <input type="text" name="" value=""></p>
</div>

- Jason Hoffman