This question already has answers here:
My inline-block elements are not lining up properly
(5 个回答)
6年前关闭。
这两个内联块
我已经用像素精度设置了每个
但这会产生以下结果:
这是此代码的 fiddle。
这让我发疯,但结果在多个浏览器中是一致的,所以我一定是做错了什么。
谁能解释为什么,并提供修复?
(5 个回答)
6年前关闭。
这两个内联块
<div>
应该(至少,我认为它们会)对齐:<div class="calendar">
<div class="month">
<div class="month-name">January</div>
</div>
<div class="day">
<div class="day-number">21</div>
<div class="day-name">Wednesday</div>
</div>
</div>
<div class="button"></div>
我已经用像素精度设置了每个
<div>
的高度:.calendar {
display: inline-block;
width: 80px;
height: 74px;
}
.calendar .month {
background-color: firebrick;
border-radius: 3px 3px 0 0;
}
.calendar .month-name {
color: white;
font-size: 13px;
text-align: center;
height: 26px;
}
.calendar .day {
background-color: linen;
border-radius: 0 0 3px 3px;
}
.calendar .day .day-number {
color: black;
font-size: 26px;
font-weight: bold;
text-align: center;
height: 30px;
}
.calendar .day .day-name {
color: darkgray;
font-size: 10px;
text-align: center;
height: 18px;
}
.button {
background-color: silver;
display: inline-block;
border-radius: 3px;
width: 220px;
height: 74px;
}
但这会产生以下结果:
这是此代码的 fiddle。
这让我发疯,但结果在多个浏览器中是一致的,所以我一定是做错了什么。
谁能解释为什么,并提供修复?
最佳答案
在任何有内联块的地方做 vertical-align:top
。.calendar { vertical-align: top; }
说明:inline-blocks 仍然是“in-line”并且垂直对齐是基线意味着它们不一致并且它们的高度会有所不同,top 使它们始终从顶部开始。
关于css - 为什么这两个内联块没有对齐?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14862759/