這兩個內聯塊爲什麼不對齊？

這兩個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

這兩個內聯塊爲什麼不對齊？

回答

相關問題