如何在頂部將兩個以不同字體大小內聯顯示的p元素對齊？

我必須內聯具有不同字體大小的p元素，並且希望將它們排列在頂部，以便它們的邊緣匹配。如何在頂部將兩個以不同字體大小內聯顯示的p元素對齊？

這是如何完成的？

<!doctype html> 
<html> 
<head> 
<style> 
body {border:0.1em red solid; width:100%; padding:5em;} 
p {display:inline; vertical-align:top} 
.big {font-size:9em; } 
.text {font-size:2em; } 
.container{height:15em;} 
</style> 
<meta charset="UTF-8"> 
<title>Text Align</title> 
</head> 

<body> 

<p class="big">x</p><p class="text"> HELLO WORLD</p> 


</body> 
</html>

更新：

下面是一個更真實的世界範例代碼。在調整行高時，我很難將它們放到頁腳容器的上邊緣。

<!doctype html> 
<html> 
<head> 
<style> 
body {border:0.1em red solid; width:600px; padding:1em; } 
p {display:inline-table; vertical-align:top; padding:0em; margin:0em; background-color:red;} 
.big {font-size:9em; line-height:35px; padding:0em;} 
.text {font-size:2em;} 
.footer {background-color:green; padding:0em; line-height:1.7em; height:auto; overflow:hidden;} 
.area {background-color:yellow; height:500px; margin-bottom:1em; padding:0em;} 
</style> 
<meta charset="UTF-8"> 
<title>Text Align</title> 
</head> 

<body> 
<div class="area"> 
</div> 
<div class="footer" > 
<div style="margin:5em auto; display:table;"> 
<p class="big">x</p> 
<p class="text"> HELLO WORLD</p> 
</div> 
</div> 

</body> 
</html>

來源

2016-12-07 Roland

他們_are_都對準線箱的頂部的高度 - 給他們一個背景，你會看到它。這裏的問題是行高，加上x當然比另一個段落中的大寫字母要小得多。給出第一個大約.3的行高，或者第二個第五個中的一個，並且你會更接近（！）你可能想要達到的目標。 – CBroe

由於您無法使用CSS自動調整它，我建議您進行手動調整。

詳情on the reason see this link

使用line-height: 49px;或line-height: .35em;來匹配這些p元素

<!doctype html> 
 
<html> 
 
<head> 
 
<style> 
 
body {border:0.1em red solid; width:100%; padding:5em;} 
 
p {display:inline; vertical-align:top} 
 
.big {font-size:9em; line-height: 49px; } 
 
.text {font-size:2em; } 
 
.container{height:15em;} 
 
</style> 
 
<meta charset="UTF-8"> 
 
<title>Text Align</title> 
 
</head> 
 

 
<body> 
 

 
<p class="big">x</p><p class="text"> HELLO WORLD</p> 
 

 

 
</body> 
 
</html>

FOR UPDATE： -

將加到.text和padding:0em 1em 1em 1em;的.big。因爲line-height影響的.big

<!doctype html> 
 
<html> 
 
<head> 
 
<style> 
 
body {border:0.1em red solid; width:600px; padding:1em; } 
 
p {display:inline-block; vertical-align:top;} 
 
.big {font-size:9em; padding-top:0em; margin:0em; line-height:0.35em} 
 
.text {font-size:2em;margin-top:0;} 
 
.footer {background-color:green; overflow:hidden; padding:0em 1em 1em 1em;} 
 
.area {background-color:yellow; height:500px; margin-bottom:1em; padding:0em;} 
 
</style> 
 
<meta charset="UTF-8"> 
 
<title>Text Align</title> 
 
</head> 
 

 
<body> 
 
<div class="area"> 
 
</div> 
 
<div class="footer" > 
 
<p class="big">x</p> 
 
<p class="text"> HELLO WORLD</p> 
 
</div> 
 

 
</body> 
 
</html>

來源

2016-12-07 19:06:37 jafarbtech

謝謝，所以這總是需要手動調整？ – Roland

Yaah沒有其他辦法。因爲如果這是一個頂級錯誤，你可以用一些javascript進行調整。因爲這是'行高'，我只能手動調整。爲此[請參閱此鏈接]（http://stackoverflow.com/a/11857786/6082645） – jafarbtech

您也可以使用'line-height：.35em;'手動調整它 – jafarbtech

如何在頂部將兩個以不同字體大小內聯顯示的p元素對齊？

回答

相關問題