Question

这是Demo。

我想将两个<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

默认情况下，内联（-block）元素（本例中的段落）在基线中垂直对齐。您可以添加vertical-align: top;来修复对齐问题。

<强> Updated Demo

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

有关详细信息，请参阅this answer。

Answer 2

<span>可能是更好的解决方案：

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;
}

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>

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

3 个答案: