html - 三个按钮的宽度不添加 100% 百分比

Question

代码

.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% 时会溢出？我如何才能使它们适合准确的宽度？

Answer 1

这是内联元素出现的问题。它们将呈现元素之间的空白区域。

尝试将 float: left 放在按钮上。这将确保按钮之间没有间距。

您还可以编辑 html，使按钮之间没有间隙

<button></button><button></button>

See here对问题的一个很好的解释