因此，我有了快速填写的表格，现在就可以制作双列。
链接：http://codepen.io/zomdar/pen/WbXBaq
<head>
</head>
<body>
<fieldset>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>
CSS：
fieldset { width: 900px; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }
但是问题是，当我将div标签放一半并放在html ....中时，我必须放置2个“半”字段才能转到下一行。我不能只把一半的班级和另一半的班级放在一起。关于我该怎么做的任何想法？也许再增加一个班？
最佳答案
添加一个类.clear { clear: both; }像这样：
fieldset { width: 500px; padding: 1%; }
input[type=text], select, textarea { width: 98%; }
.half { float: left; width: 48%; padding: 1%; }
.clear { clear: both; }
.full { clear: both; width: 98%; padding: 1%; }
.right { text-align: right; }<head>
</head>
<body>
<fieldset>
<legend>Contact form</legend>
<form>
<div class="half">
<label for="name">Name</label>
<input type="text" id="name" name="name">
</div>
<div class="clear"></div><!-- added div class clear -->
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half right">
<input type="submit" value="send">
</div>
</form>
</fieldset>
</body>
</html>