甚至在有和没有边框的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上的高度

回答

相关问题