<分区>
<分区>
我最近开始做前端，但遇到了一些问题。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em; /* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
}
body {
background-color: #24272E;
}<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class=header>
<div class="head-title"><p>Amazing Title</p></div>
<div class="head-button"><p>Foo</p></div>
<div class="head-button"><p>Bar</p></div>
</div>
</body>
</html>您可以运行代码 here .问题在于将红色按钮与导航栏 (header) 对齐。这些按钮应该从导航栏的顶部延伸到底部，但它们没有与顶部对齐。这是由 head-title 元素引起的。如果字体大小设置为 1em，那么问题就消失了。为什么会这样？感谢您的帮助。
最佳答案
在 .head-button 上设置 vertical-align: top;:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: white;
padding: 0 10%;
height: 40px;
}
.head-title {
display: inline-block;
text-align: center;
font-size: 1.3em;
/* Changing this to 1em fixes the problem */
width: 260px;
height: 40px;
margin: 0 10px;
}
.head-button {
display: inline-block;
width: 80px;
height: 40px;
background-color: red;
vertical-align: top;
}
body {
background-color: #24272E;
}<div class=header>
<div class="head-title">
<p>Amazing Title</p>
</div>
<div class="head-button">
<p>Foo</p>
</div>
<div class="head-button">
<p>Bar</p>
</div>
</div>关于html - 更改标题字体大小会使 div 不对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59590986/