我必须内联具有不同字体大小的 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>
最佳答案
因为你不能用 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>对于更新:-
将 margin-top:0; 添加到 .text 和 padding:0em 1em 1em 1em; at .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>关于css - 如何对齐显示在顶部的不同字体大小的两个 p 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41025275/