0

我在labels里面有两个divthat's widthis75%和 it max-widthis 700px。,labels设置为width: 49%, padding（或margin）:1%和display: inline-block时，不会彼此相邻显示或伸出容器边缘。但是，当widthis时49.5%，它们会一直执行到包含div小于 its为止max-width。我尝试将 to 设置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;
}

错误的

正确的

4

2 回答 2

2

都可以用 display: block; 和框大小：边框框；

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/

于 2013-09-02T20:45:06.360 回答
2

49% + 49% + 2% + 2% = 102%

改变

 padding: 1%;

至

padding-right: 1%;
于 2013-09-02T20:41:48.383 回答