三个按钮的宽度不以百分比添加 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%CCD_ 1值。

因此，它应该等于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>

有关问题的详细解释，请参见此处

Answer 2

在按钮之间添加间距，因为默认情况下它们是内联显示的。使用按钮上的float: left。

.w-33 {
  width: 32%;
  margin-left: 2%;
  float: left;
}
.w-33.first {
  margin-left: 0;
}
button {
  padding: 15px;
  border-radius: 3px;
  border: none;
  font: 22px sans-serif;
  border: 1px solid black;
  background: #644eb5;
  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>