您的位置：首页 > 网站优化 > css  >  网页中怎么实现checkbox&radio对齐的教程

网页中怎么实现checkbox&radio对齐的教程

 更新时间：2017年1月22日 11:03  点击：1465
这篇文章介绍了如何利用css实现checkbox&radio对齐的方法，代码简单易懂，推荐初学者学习一下。

不仅不同浏览器不同，不同的字体,不同的文字大小也会表现不一样。

重置 form checkbox & radio

因为不同浏览器解析不一样，有些是默认margin，有些是默认padding，还有ie6,7连margin和padding即使设置为0后，所占的空间还是比较大，所以还是有必须重置下，这样就能解决很多不必要的麻烦。

以下是 14px Arial 字体的解决方案：

1、css代码

.form {font:14px/18pxArial,Helvetica,sans-serif; }
.form input, .form label {vertical-align:middle; }
.form label {margin-right:6px; }
.form_checkbox, .form_radio {
    margin:03px00;/*与右侧文字的间距*/
    padding:0;
    width:13px;
    height:13px;
    /*ie7 ie6 根据不同的 font-size 设置不同的值*/
    *vertical-align:1px;
}

2、html代码

<formname="form1"method="post"action=""class="form">
  <p>
    <inputtype="checkbox"name="checkbox4"id="checkbox4"class="form_checkbox">
    <labelfor="checkbox4">checkbox4</label>
    <inputtype="checkbox"name="checkbox5"id="checkbox5"class="form_checkbox">
    <labelfor="checkbox5">checkbox5</label>
    <inputtype="checkbox"name="checkbox6"id="checkbox6"class="form_checkbox">
    <labelfor="checkbox6">checkbox6</label>
  </p>
  <p>
    <inputtype="radio"name="radio"id="radio4"value="radio4"class="form_radio">
    <labelfor="radio4">radio4</label>
    <inputtype="radio"name="radio"id="radio5"value="radio5"class="form_radio">
    <labelfor="radio5">radio5</label>
    <inputtype="radio"name="radio"id="radio6"value="radio6"class="form_radio">
    <labelfor="radio6">radio6</label>
  </p>
</form>

3、效果图

[!--infotagslink--]

相关文章

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • Ant design vue table 单击行选中 勾选checkbox教程

    这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25

  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15

  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21

  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25

  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04

  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07

  • C#遍历得到checkboxlist选中值和设置选中项的代码

    这篇文章主要介绍了C#遍历得到checkboxlist选中值和设置选中项的代码,代码简单易懂，具有参考借鉴价值，需要的朋友可以参考下...2020-06-25

  • Android中用HttpClient实现Http请求通信

    本文我们需要解决的问题是如何实现Http请求来实现通信，解决Android 2.3 版本以后无法使用Http请求问题，下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20

  • mysql存储过程实现split示例

    复制代码 代码如下:call PROCEDURE_split('分享,代码,片段',',');select * from splittable;复制代码 代码如下:drop PROCEDURE if exists procedure_split;CREATE PROCEDURE `procedure_split`( inputstring varc...2014-05-31

  • jquery checkbox无法用attr()二次勾选问题的解决方法

    下面小编就为大家带来一篇jquery checkbox无法用attr()二次勾选问题的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-07-29

  • jq checkbox 的全选并ajax传参的实例

    下面小编就为大家带来一篇jq checkbox 的全选并ajax传参的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2017-04-03

  • vue使用vant中的checkbox实现全选功能

    这篇文章主要为大家详细介绍了vue使用vant中的checkbox实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-11-17

  • PHP+Mysql+Ajax+JS实现省市区三级联动

    基本思想就是：在JS动态创建select控件的option,通过Ajax获取在PHP从SQL数据库获取的省市区信息，代码有点长，但很多都是类似的，例如JS中省、市、区获取方法类似，PHP中通过参数不同执行不同的select语句。index.html代码：复制...2014-05-31

  • JS实现程序暂停与继续功能代码解读

    下面代码用JS实现了程序的暂停与继续 复制代码 代码如下: <script type="text/javascript"> /*Javascript中暂停功能的实现 Javascript本身没有暂停功能（sleep不能使用）同时 vbscript也不能使用doEvents，故编写此函数实...2013-10-13

  • VS2019使用快捷键将代码对齐的方法

    这篇文章主要介绍了VS2019使用快捷键将代码对齐的相关资料,非常不错对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-06-25

  • Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

    这篇文章主要介绍了Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法的相关资料,需要的朋友可以参考下...2016-05-04

  • PHPCMS实现自动推送URL到百度站长平台

    我们一起来看一篇关于PHPCMS实现自动推送URL到百度站长平台，希望此教程能够帮助到各位朋友。 百度站长平台开放url推送接口，可以使用调用接口的形式主动及时推送u...2016-11-25