当以百分比形式将 "padding" 属性放在子元素上时,按钮不会拉伸,文本会从容器中掉出



下面是一个例子

<button style="min-width: 150px; height: 63px;">
<div style="padding-left: 70%;">something</div>
</button>

我尝试了不同的选项"width"属性(子元素和父元素),但它不起作用…

百分比以容器为准。

你的容器是150px宽,你的填充是(150 - left & right padding - left & right border width) * 0.7

假设按钮本身没有填充和边框,150 * 0.7 = 105

添加内容的大小"something"(假设是65px),它溢出(105 + 65 = 170 > 150))。

假设按钮宽度增加并成为170px,这将是同样的问题,填充改变为170 * 0.7 = 119px,所以新的按钮宽度将是119 + 65px = 184px,等等

我建议你用另一种计量单位。

如果你需要根据容器的宽度来设置内边距,你可以使用百分比,但要有合理的值:减少内边距,增加宽度,或者为div设置一个% width(但在这种情况下是文本"something")仍会溢出)等

最新更新