创建三个场集的布局

Question

我目前正在处理由三个字段集组成的页面布局。理想情况下，我希望第一个跨越到100％，另外两个并排在50％宽度之下。

我不确定我需要做些什么来完成这项工作。我已将我想要的两个设置为50％并显示：inline-block;但是，它们仍然在每条线上显示两个50％宽度的字段集。

我的代码：

ul {
	list-style: none;


}
a {
	text-decoration: none;


}
#inline {
	width :50%;
	padding : 0;
	margin : 0;
	display : inline;

}


input[type=submit]#loc{
	margin-left: 75px;
	display:inline-block;
}

td {
padding: 10px;

}

label{
    display: inline-block;
    float: left;
    clear: left;
    width: 250px;
    text-align: right;
}
.input input {
  display: inline-block;
  float: left;
}
.inputAdd input {
  display: inline-block;
  float: right;
}

<div class="container">
		<div class="main">
			 <fieldset class= "spanField">
				<legend>Spanned Field</legend>					
					<form method="post" action="index.php" onsubmit="validation();">
						<label>Input 1&nbsp;</label>
						<input  type="text" size="20">	
						<label>Input 2&nbsp;</label>
						<input  type="text" size="20">						
						<input type="submit" value="Add" />
						<table style ="display:inline;">
						<tr>
						<td></td><td>Input</td><td>Input</td>
						</tr>	
						<tr>
						<td><button>X</button></td><td>Input 1</td><td>911 1</td>
						</tr>
						<tr>
						<td><button>X</button></td><td>Input 2</td><td>911 2</td>
						</tr>
						</table>
					</form>
			 </fieldset><br />
			 <fieldset id = "inline" class ="inputAdd">
				<legend>Half field</legend>
					<form method="post" action="index.php" onsubmit="validation();">					
						<table>
						<tr>
						<td></td><td>Input</td>
						</tr>	
						<tr>
						<td><button>X</button></td><td>Input 1</td>
						</tr>
						<tr>
						<td><button>X</button></td><td>Input 2</td>
						</tr>
						</table>
						<div style ="float:right;">
						<select >
						<option>Option 1</option>
						</select>
						<input type="submit" value="Add" />
						</div>
					</form>
			 </fieldset>
			 <fieldset id="inline" class ="input">
				<legend>Half Field</legend>
					<form method="post" action="index.php" onsubmit="validation();">
						<label>Add input&nbsp;</label>
						<input  type="text" size="20">						
						<input type="submit"  value="Add" />
					</form>
					<table>
					<tr>
					<td></td><td>Input</td>
					</tr>	
					<tr>
					<td><button>X</button></td><td>Input 1</td>
					</tr>
					</table>					
			 </fieldset>
			</form>
		</div>
		</div>

Answer 1

问题是边框也计算为元素的宽度，所以你的元素不是50％而是多一点。

您可以使用设置为box-sizing的{​​{1}} css属性来解决此问题：

border-box

详细了解w3schools上所有可能的 box-sizing: border-box; 属性。您还需要浮动元素（css：box-sizing）。

我还注意到，您使用的是具有相同ID的两个元素。只有一个元素应该有一个id，所以请更改你的选择器以使用这样的类：

float: left

并在您的HTML中：

.inline {
  width: 50%;
  padding: 0;
  margin: 0;
  display: inline;
  box-sizing: border-box;
  float: left;
}