代码
.w-33 {
width: 32%;
margin-left: 2%;
}
.w-33.first {
width: 32%;
margin-left: 0;
}
button {
padding: 15px;
border-radius: 3px;
border: none;
font: 22px sans-serif;
color: white;
border: 1px solid black;
background: #644eb5;
}
button {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color: white;
}
<button type="button" class="w-33 first">Join League</button>
<button type="button" class="w-33">Start League</button>
<button type="button" class="w-33">Choose Later</button>
我想做什么
我有三个按钮,它们应该填充它们父级的宽度(宽度可变)。
第一个应该恰好是宽度的 32%,没有边距;另外两个也是 32% 宽度,但具有 2% margin-left
值。
因此它应该等于 100%:
Each button
[ 32% + 0% ] [ 32% + 2% ] [ 32% + 2% ]
Added
[ 32% ] [ 34% ] [ 34% ]
Cumulative
[ 32% 66% 100% ]
为什么它们在应该为 100% 时会溢出?我如何才能使它们适合准确的宽度?
最佳答案
这是内联元素出现的问题。它们将呈现元素之间的空白区域。
尝试将 float: left
放在按钮上。这将确保按钮之间没有间距。
您还可以编辑 html,使按钮之间没有间隙
<button></button><button></button>
See here对问题的一个很好的解释
关于html - 三个按钮的宽度不添加 100% 百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32669970/