Html 在同一行中对齐两个 <p> 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22405858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align the two <p> element in the same line
提问by Vigor
This is the Demo.
这是演示。
I want to align the two <p>element in the same line, but you can see the second one moves down a little bit. Anybody knows the reason?
我想将两个<p>元素对齐在同一行中，但您可以看到第二个元素向下移动了一点。有人知道原因吗？
HTML
HTML
<div class="logo">
<p>Hello world</p>
<p class="web_address">Hello all</p>
</div>
CSS
CSS
.logo p {
margin:0;
padding:0;
border: solid 1px black;
margin-left: 20px;
font-size: 36px;
display: inline-block;
line-height: 80px;
}
回答by Hashem Qolami
Inline(-block) elements (the paragraphs in this case) are aligned vertically in their baselineby default. You could add vertical-align: top;to fix the alignment issue.
默认情况下，内联（-块）元素（在这种情况下是段落）在其基线中垂直对齐。您可以添加vertical-align: top;以修复对齐问题。
更新演示。
.logo p {
/* other styles goes here... */
display: inline-block;
vertical-align: top;
}
For further details you can refer this answer.
有关更多详细信息，您可以参考此答案。
回答by Lowkase
<span>might be a better solution:
<span>可能是更好的解决方案：
<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;
}
回答by Jason Hoffman
the following worked for me:
以下对我有用：
.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>