Question

我必须内联具有不同字体大小的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>

Answer 1

由于您无法使用CSS自动调整，我建议您进行手动调整。

有关详细信息on the reason see this link

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

＆＃13;

<!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>

＆＃13;

更新： -

将margin-top:0;添加到.text和padding:0em 1em 1em 1em; .big。因为line-height会影响.big

的高度

＆＃13;

<!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>

＆＃13;

如何将内联显示的两个p元素与顶部不同的字体大小对齐？

1 个答案: