web前端——让人头疼的多列复选框排列解决办法

    为大多的复选框组或单选按钮组创建两列的布局有点复杂。标签只能用于各个元素，而不能用于元素组。理想情况下，我们将整个组在一个fieldset中，并且使用legend作为这个组的标签。不幸的是，由于浏览器处理legend的定位方式不一致，所以这在当前不是可行的解决方案。因此，在浏览器提供更一致的支持之前，最好的解决方式是使用标题元素。

    为了创建列效果，要讲复选框分成两组，每一组放在一个div中。然后将这两个div元素放到一个具有描述性ID的fieldset中（当然，这个时候你也可以使用注释）；如下列代码：

 1  < fieldset  id ="favoritecolor" >
 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设置宽度，并且让他们看起来是向左浮动，从而创建出两列的布局，有代码有真相：

 1  fieldset#favoritecolor {
 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，代码如下：

1  #favoritecolor label
2  {
3  width : 3em ;
4  float : none ;
5  display : inline ;
6  }

 

    标签和复选框现在都对齐了。但是每个段落的默认空白是垂直空间太大，那么我们怎么办呢？我们可以减少段落的顶部空白和底部空白：

1      #favoritecolor p {
2  margin : 0.3em 0 ;
3  }

    现在有了一个复杂的表单布局。基本表单样式负责一般的布局，然后可以通过覆盖这些样式分别处理例外情况。好了，写到这里吧，感谢“think_fish ”和“pulihe”两位的意见，我会注意，以后改进！

 

        （喜欢学习的和想与我探讨各种web知识的留下你的邮箱或联系方式，或者跟我发邮件747850255@qq.com转载请自觉附上转载地址，来自博客园“明年开奥迪”)

转载于:https://www.cnblogs.com/jiawl/archive/2011/06/07/2074616.html