html - 创建三个字段集的布局

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 css 属性设置为 border-box 来解决此问题:

 box-sizing: border-box;

在 w3schools 上阅读有关所有可能的 box-sizing 属性的更多信息.您还需要 float 元素 (css: float: left)。

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

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

在您的 HTML 中:

<fieldset class="inputAdd inline">