按鈕高度大於嵌套內容的高度

我正在使用引導程序4 alpha。按鈕高度大於嵌套內容的高度

<button class="btn btn-link p-0"> 
    <div style="display:inline-block; background-color:#c2f5ff; width: 100px; height: 100px;"> 
    </div> 
</button>

Fiddle

我嵌套在按鈕內部一個div。我在div上設置高度和寬度。我的按鈕寬度適合div，但按鈕的高度比需要的大。當你點擊按鈕時，藍色輪廓不適合內容。

爲什麼會發生這種行爲？

來源

2017-07-31 Wayn Chaw

爲什麼你需要一個按鈕內的div？ – Toastrackenigma

@Toastrackenigma也許我想做一個有多個元素可點擊的區域 –

然後你做錯了。 ** ANY **單擊按鈕將激活按鈕父級上的腳本（除非您正確處理該事件），並且它不是語義 - 嘗試使用多個按鈕來處理每個單擊事件*。如果您想在單擊一個按鈕時觸發多種事件，請了解JavaScript中事件的工作方式 – Toastrackenigma

這是由於inline-block的性質。內部div的按鈕是inline-block。缺省值爲vertical-align: baseline，這會造成額外的差距。如果你爲你設置div某個值vertical-align以外的其他值baseline（top,middle,）按鈕將有預期的102x102大小（內容寬度+ 1px邊框）。

說明有關vertical-align: baseline從this answer：

由於默認瀏覽器計算vertical-align屬性爲baseline，這是默認的行爲。下圖顯示了基線位於文本：

Location of the baseline on text

基線對齊的元素需要保留的空間延伸到基線以下的descenders（如j，p，g等），你可以看到在上面的圖片。

所以只是從你的內心div刪除display: inline-block看到預期的結果。

來源

2017-07-31 20:38:11

您可以刪除btn中的div上的display: inline-block，並刪除btn的邊框（以刪除btn中的白色填充）。所以，現在的DIV中自動爲display: block

希望這有助於:)

來源

2017-07-31 19:35:17

無論如何，div元素在所有瀏覽器中均顯示爲塊級元素 – Toastrackenigma

簡單，按鈕沒有100px寬或高。

你需要設置按鈕的大小，然後使div裏面填充按鈕。

body { 
 
    margin: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<button class="btn btn-link p-0" style="border-style:none;width:100px;height:100px;"> 
 
    <div style="background-color:#c2f5ff; width: 100%; height: 100%;"> 
 
    </div> 
 
</button>

我們通過按鈕本身設置width:100px和height:100px，然後使格內填充可用的寬度和高度與width:100%和height:100%做到這一點。

還有周圍的按鈕1px - 寬邊界，您應該border-style:none

來源

2017-07-31 19:41:55 Toastrackenigma

刪除我不知道你爲什麼會想有一個按鈕內一個div，但是這是我做過什麼：

我將width和height設置爲按鈕並將嵌套div的width和height設置爲100%。這將使嵌套的div與按鈕的大小相同。

這是jsfiddle。

來源

2017-07-31 20:21:12 flawy

按鈕高度大於嵌套內容的高度

回答

相關問題