爲什麼內容inline-block的會影響其在容器

Here's a fiddle that shows my code in action 爲什麼內容inline-block的會影響其在容器

結果似乎瘋了，我的位置是：在Chrome中第二個按鈕是略高於第一。在Firefox中，它略低於。

<div id="accounts"> 
    <button class="account"> 
    <h1>VISA Card</h1> 
    <span class="balance">-433.18</span> 
    </button> 
    <button class="account"> 
    <h1 class="plus"><i class="icon icon-plus-sign"></i></h1> 
    <span class="plus-text">Add Account</span> 
    </button> 
</div>

什麼是更令人困惑的是，填充在h1.plus影響整個div的位置。

這是怎麼回事？我想要兩個按鈕顯示在同一行上，並且根本不明白爲什麼它們不是。這是渲染引擎中的錯誤嗎？

更新： Narendra建議一個簡單的修復 - 浮動：留下按鈕。我想弄清楚爲什麼這個錯位發生在第一位。

來源

2013-06-27 Paul

您使用display:inline-block，所以按鈕被他們vertical-align屬性，默認爲baseline對齊。

這是從specs了圖示正是：

enter image description here

可以在第一兩個箱看到填充和內容的字體大小如何影響定位。

作爲修復，請使用vertical-align: top或bottom，或者甚至使用middle。

編輯：圖像從表部和the situation爲直列塊略低不同。

來源

2013-06-27 07:29:16 user123444555621

這個肯定是的，謝謝稱重，單元格的基線由其內容決定，Spec說」單元格的基線是單元格中第一行文本的基線「一些實驗我不相信是這種情況FF和Chrome之間的差異是由兩個瀏覽器中不同的默認按鈕樣式引起的 – Paul

@Paul不是。我鏈接到spec的* table *部分，因爲它包含了一個很好的但是，[inline-blocks]的情況略有不同（http://www.w3.org/TR/CSS2/visudet.html#leading）：「*'inline-block'的基線是除非它沒有流入線框或者其「溢出」屬性的計算值不是「可見」，在這種情況下，基線是底部邊緣邊緣。「另請參見此示例：http://jsfiddle.net/Gq3U8/26/ – user123444555621

@ user123444555621，這是t他是我見過的最好的問題。謝謝，它真的幫助我！ – gnclmorais

檢查下面的代碼

button.account { 
    display: block; 
    float: left; 
    height: 80px; 
    margin: 10px 10px; 
    padding: 10px 5px; 
    width: 170px; 
} 
.account h1 { 
    font-size: 16px; 
    height: 16px; 
    margin: 0 0 5px; 
    padding: 4px 0 2px; 
} 
.account .balance { 
    display: block; 
    font-size: 24px; 
} 

.account h1.plus { 
    font-size: 24px; 
    padding-top: 0px; 
}

這裏是小提琴http://jsfiddle.net/Gq3U8/13/

來源

2013-06-27 03:38:07 Narendra

謝謝，我試了一下你的代碼，只需要改變就是float：left ;.任何想法，爲什麼它沒有它的工作？ – Paul

float：left使元素從窗口的左側排列。 – Narendra

我知道什麼是浮動的：左邊是。但沒有它，爲什麼它不工作？浮球的一個問題是它們不能拉伸容器。爲div＃帳戶添加邊框，或者在頁面底部添加一些內容，您將看到情況如何分崩離析。 – Paul

添加到您的button.account：vertical-align: middle;。

而且您可能會失去display: inline-block;屬性，因爲它不是必需的。

來源

2013-06-27 04:01:33 Gimmy

vertical-align：中間工作，謝謝。其他選項是「。帳戶* {line-height：20px; }「，但爲什麼呢？ – Paul

-1

如果您使用的是inline-block，主要關注的是空白（您會看到元素周圍的默認邊距）。要解決這個問題，只需添加vertical-align:top，而不是使用float:left。它會將元素對齊到頂部。

.account { 
    display: inline-block; 
    vertical-align: top; /*add this one*/ 
    margin: 10px 10px;  /*remove this one then can see whitespace*/ 
}

來源

2013-06-27 06:14:31

爲什麼內容inline-block的會影響其在容器

回答

相關問題