Pecentages和padding不能正确相加

Question

我在一个div里面有两个labels，它的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

它可以全部固定与显示:块；和框大小:边框；

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/