完成checkbox&radio对齐的方式

日期:2021-03-23 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

不但不一样访问器不一样,不一样的字体样式,不一样的文本尺寸也会主要表现不1样。

重设 form checkbox & radio

由于不一样访问器分析不1样,一些是默认设置margin,一些是默认设置padding,也有ie6,7连margin和padding即便设定为0后,所占的室内空间還是较为大,因此還是有务必重设下,这样就可以处理许多无须要的不便。

下列是 14px Arial 字体样式的处理计划方案:

1、css编码

.form { font: 14px/18px Arial, Helvetica, sans-serif; }
.form input, .form label { vertical-align: middle; }
.form label { margin-right: 6px; }
.form_checkbox, .form_radio {
    margin: 0 3px 0 0;/*与右边文本的间隔*/
    padding: 0;
    width: 13px;
    height: 13px;
    /*ie7 ie6 依据不一样的 font-size 设定不一样的值*/
    *vertical-align: 1px;
}

2、html编码

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

3、实际效果图

以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!

上一篇:设计方案体验:按钮上的內容 返回下一篇:没有了