对齐两个< p>元素在同一行中 [英] Align the two <p> element in the same line

问题描述

这是演示。

我想在同一行中对齐两个< p> 元素，但是您可以看到第二个元素向下移动一点。任何人都知道原因？

HTML

 < div class =logo> 
< p> Hello world< / p> 
< p class =web_address>全部你好< / p> 
< / div> 
  

CSS

  .logo p {
 margin：0; 
 padding：0; 
 border：固体1px黑色; 
 margin-left：20px; 
 font-size：36px; 
 display：inline-block; 
 line-height：80px; 
 
  

解决方案

（本例中的段落）在默认情况下在基准中垂直对齐。您可以添加 vertical-align：top; 来解决对齐问题。

更新了演示版本 。

$ c> .logo p {
/ *其他风格在这里... * /
display：inline-block;
vertical-align：top;





$ b

有关更多详细信息，请参阅这个答案。

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?

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

解决方案

Inline(-block) elements (the paragraphs in this case) are aligned vertically in their baseline by default. You could add vertical-align: top; to fix the alignment issue.

Updated Demo.

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

For further details you can refer this answer.

这篇关于对齐两个< p>元素在同一行中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！