按钮高度大于嵌套内容的高度

我正在使用引导程序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

按钮高度大于嵌套内容的高度

回答

相关问题