甚至在有和沒有邊框的div上的高度

我可以用1em填充兩個按鈕 - 一個帶有背景色和另一個帶邊框，以具有相同的高度嗎？基本上有邊界內的div。甚至在有和沒有邊框的div上的高度

試圖使用框尺寸：邊框;方法，但沒有解決我的問題。

HTML：

<div class="button1">Button1</div> 
<div class="button2">Button2</div>

CSS：

*, *:before, *:after { 
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 

.button1 { 
    padding: 1em; 
    border-style: solid; 
    border-color: #666; 
    border-width: 4px; 
    display: inline-block; 
} 

.button2 { 
    padding: 1em; 
    background-color: #e54; 
    display: inline-block; 
}

不能換我的頭周圍，似乎是一個合理的解決方案。在此先感謝。

來源

2014-02-27 Lars Flygt

給.button2一個與其背景色相同顏色的邊框。

小提琴顯示此：JS Fiddle

來源

2014-02-27 21:17:34 essmahr

執行以下操作

.button1 { 
    outline: solid #666 4px; 
}

刪除等邊界的細節。

來源

2014-02-27 21:21:09 Bikas

您可以使用CSS中的calc函數將4px的填充添加到第二個按鈕。這會不會把邊境DIV中，而調整的第二個div填充以匹配第一...

.button2 { 
    padding: calc(1em + 4px); 
    background-color: #e54; 
    display: inline-block; 
}

不中IE8或以下的工作，但話又說回來，有哪些呢？這裏是一個小提琴：http://jsfiddle.net/a8LT7/

來源

2014-02-27 21:22:03

-1

您可以使用jQuery或JavaScript DOM：

$(".button2").css({"height":$(".button2").height() - 8px});

或

var height = document.getElementsByClassName("button1")[0].setoffHeight; 
$(".button2").css({"height":height});

來源

2014-02-27 21:58:34

這是使用JavaScript的東西，可以通過CSS更容易得到解決的一個很好的例子。 – Nit

甚至在有和沒有邊框的div上的高度

回答

相關問題