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

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

在 GridView 控件中添加一列复选框51
简介在前面的教程中 , 我们学习了如何为 GridView 控件添加一列单选按钮来选择一个特定的记录.当用户被限制最多只能从网格中选中一项时,一列单选按钮是一个非常恰当的用户界面.然而,有时我们 ...
C#如何在DataGridView里面添加一列复选框进行批量删除
前提 1,我的DataGridView名字是dgvwell 2,我想在第五列加入复选框以实现批量删除. 3,点击批量删除按钮(button1),再点击确定删除按钮(button3)来实现. 效果代码 ...
web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
几款常用的编辑器介绍，给刚入门学Web前端的人
相信每个前端开发工程师在从事Web前端的过程中,都有几款比较常用且顺手的编辑器.下面,小千就介绍几款常用的剪辑器,给刚刚入门学习Web前端的人参考. 1.HBuilder 简介:HBuilder是专为 ...
介绍几款常用的剪辑器，给刚入门学习Web前端的人！
在武汉Web前端开发常用的编辑器有哪些?相信每个前端开发工程师在从事Web前端的过程中,都有几款比较常用且顺手的编辑器.下面,就介绍几款常用的剪辑器给刚刚入门学习Web前端的人参考. 1.HBuild ...
前端html小技巧（form篇）：复选框、单选按钮的使用
今天分享下"前端html小技巧(form篇):复选框.单选按钮的使用"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南 ...
ag-grid 学习笔记三：ag-grid设置（定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序）
目录一定义列二选择行三设置复选框四设置行高列宽五置顶合计行六底部合计行七行组八客户端排序一定义列表格的列有如下常用属性. 名称说明 headerName 显示的 ...
5、Web 窗体的基本控件——复选框控件和复选组控件（CheckBox 和 CheckBoxList）
5.Web 窗体的基本控件--复选框控件和复选组控件(CheckBox 和 CheckBoxList) 复选框控件和复选组控件(CheckBox 和 CheckBoxList) 前端 <%@ P ...
silverlight带有复选框的列
今天我们来一起学习怎样自定义DataGrid的单元格呈现形式的基本操作方法. 基本知识讲解 1)两种状态 DataGrid的单元格的状态有两类,即编辑状态和非编辑状态. 在实际开发中,如果一个单元 ...

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

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

最新文章

热门文章