为大多的复选框组或单选按钮组创建两列的布局有点复杂。标签只能用于各个元素，而不能用于元素组。理想情况下，我们将整个组在一个fieldset中，并且使用legend作为这个组的标签。不幸的是，由于浏览器处理legend的定位方式不一致，所以这在当前不是可行的解决方案。因此，在浏览器提供更一致的支持之前，最好的解决方式是使用标题元素。
为了创建列效果，要讲复选框分成两组，每一组放在一个div中。然后将这两个div元素放到一个具有描述性ID的fieldset中（当然，这个时候你也可以使用注释）；如下列代码：
2 <h2>Favorite color：</h2>
3 <div>
4 <p><input class="checkbox" id="red" name="red" type="checkbox" value="red" />
5 <label>red</abel>
6 </p>
7 <p><input class="checkbox" id="red" name="red" type="checkbox" value="red" />
8 <label>red</abel>
9 </p>
10 ....
11 </div>
12 <div>
13 <p><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />
14 <label>orange</abel></p>
15 <p><input class="checkbox" id="orange" name="orange" type="checkbox" value="orange" />
16 <label>orange</abel></p>
17 ....
18 </div>
19 <br class="clear">
20 </fieldset>
因为已经创建了基本的fieldset样式，所以首先需要覆盖这些样式，将填充和空白边设置为0、去掉边框将背景设置为透明,然后将标签一样向左浮动并且将宽度设置为10em。标题还需要看起来像标签，所以需要将字体设置为normal并且减小字号。然后给div设置宽度，并且让他们看起来是向左浮动，从而创建出两列的布局，有代码有真相：
2 margin:0;
3 padding:0;
4 border:none;
5 background:transparent;
6 }
7 #favoritecolor div{
8 width:8em;
9 float:left;
10 }
因为这些div进行浮动，他们就不再占据任何空间，因此出现在fieldset的外边(不好意思，图片死活传不上来，这会整栋楼上网的人多，不好意思，等网速快点了再传)。
为了迫使fieldset包围这些浮动元素，在第二个div后面插入了一个进行清理的元素，在这个示例使用一个<br />元素，它使用的选择器是：clear：
.clear{clear:both;}(在div中也可以这样使用的，都是同一个道理。)
这个表单中的所有标签向做浮动并且将宽度设置为10em。但是，复选框的标签不需要浮动，而且宽度应该小得多。因此希望让这些标签的宽度变窄一点，以防止它们进行浮动。firefox似乎将不浮动的标签当作块元素对待，这使复选框转到下一行。为了避免这个问题，需要显示的将display属性设置为inline，代码如下：
2 {
3 width:3em;
4 float:none;
5 display:inline;
6 }
标签和复选框现在都对齐了。但是每个段落的默认空白是垂直空间太大，那么我们怎么办呢？我们可以减少段落的顶部空白和底部空白：
2 margin:0.3em 0;
3 }
现在有了一个复杂的表单布局。基本表单样式负责一般的布局，然后可以通过覆盖这些样式分别处理例外情况。好了，写到这里吧，感谢“think_fish ”和“pulihe”两位的意见，我会注意，以后改进！
（喜欢学习的和想与我探讨各种web知识的留下你的邮箱或联系方式，或者跟我发邮件747850255@qq.com转载请自觉附上转载地址，来自博客园“明年开奥迪”)
