百分比和填充不正确加起来

Question

labels中有两个div，width为75%，其max-width为700px。设置为labels，width: 49%（或padding）margin和:1%时，display: inline-block不会显示在彼此旁边或伸出容器的边缘。但是，当width为49.5%时，它们会在包含div小于其max-width之前执行。我已尝试将box-sizing设置为border-box，但这只会有所帮助。

我也尝试使用像素padding而不是百分比，但这根本不起作用。

以下是相关代码：

#container {
  width: 75%;
  max-width: 700px;
  border: 1px solid #333;
  box-shadow: #d3d3d3 0px 0px 30px;
  border-radius: 4px;
  margin: auto;
  margin-top: 10%;
  background-color: white;
}

label {
  display: inline-block;
  width: 49%;
  font-weight: bold;
  font-size: 12px;
  padding: 1%;
}

input {
  display: block;
  border: 1px solid #333;
  border-radius: 2px;
  background-color: white;
  width: 100%;
  height: 24px;
  padding: 0px 3px 0px 6px;
  margin-top: 5px;
}

Answer 1

49％+ 49％+ 2％+ 2％= 102％

更改

 padding: 1%;

到

padding-right: 1%;

Answer 2

可以用display：block;和box-sizing：border-box;

label {
  display: block; //inline-block gives a spacing between the elements.
  float: left;
  width: 49%;
  font-weight: bold;
  font-size: 12px;
  margin: 1%;
}

input {
  display: block;
  border: 1px solid #333;
  border-radius: 2px;
  background-color: white;
  width: 100%;
  height: 24px;
  padding: 0px 3px 0px 6px;
  margin-top: 5px;
  box-sizing: border-box; //without this the input is 100% + 9 pixels wide. which gives the unwanted effects
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

这是一个有效的jsFiddle：http://jsfiddle.net/TSxec/1/