这两个内联块为什么不对齐？

这两个inline-block的<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; 
}

但是，这会产生以下结果：

inline-block

她e是此代码的fiddle。

这让我疯狂，但结果在多个浏览器中是一致的，所以我一定在做错事。

任何人都可以解释为什么，并提供修复？

来源

2013-02-13 Benjamin

@Oriol“这个问题以前有人问，已经有一个答案”。不，我之前问过这个问题。更好地将另一个标记为这个的重复？ – Benjamin 2015-06-25 22:24:15

是的，你的问题比较老，但另一个问题更受欢迎：3953 vs 155 views，10 vs 1 upvotes，1 vs 0 favorites，34 vs 5 upvotes in the answers。如果您不同意，请随时在[meta]（http://meta.stackoverflow.com/）中讨论它。 – Oriol 2015-06-25 22:41:35

我觉得有点合理。不过，收到消息“这个问题之前已经被问到”是非常粗鲁的;该消息可以改进。 – Benjamin 2015-06-26 20:39:43

做什么vertical-align:top任何有内联块。

.calendar { vertical-align: top; }

说明：直列块仍然是“内联”和垂直对齐方式为基准的意思他们是不相符的，它会在自己的身高不同，顶部让他们始终从顶部开始。

来源

2013-02-13 20:46:13

谢谢，你能解释为什么吗？ – Benjamin 2013-02-13 20:50:44

内联块仍然是“内联”，垂直对齐是基线，这意味着它们不一致，并且它们的高度会有所不同，“顶”使它们始终始于顶端。 – 2013-02-13 20:56:53

设置垂直对齐到顶部日历格

.calendar { 
    display: inline-block; 
    width: 80px; 
    height: 74px; 
    vertical-align:top; 
}

jsFiddle example

来源

2013-02-13 20:46:27 j08691

谢谢，你能解释为什么吗？ – Benjamin 2013-02-13 20:50:22

由于默认的垂直对齐是基线，所以您需要将它们顶部对齐。 – j08691 2013-02-13 20:56:39

谢谢，你的回答是相当的，我已经接受了一个，并提出了另一个！ – Benjamin 2013-02-13 21:17:18

这两个内联块为什么不对齐？

回答

相关问题