• form radio & checkbox解决方案


      以前也遇到过,每次遇到每次犯怵,可是总是没有当回事,好好总结一下,今天看了为之哥的文章,特别总结一下。

      radio和checkbox最让人头疼的就是他们跟后面的文本怎么能够居中显示呢?而且还兼容各浏览器?一个方法就是用vertical-align调整,一个就是用float解决

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

     1 <form id="demo1" class="demo demo1fix" name="form1" method="post" action="#">
     2   <div class="form-item">
     3     <label>举报类型:</label>
     4     <div class="form-special-wrap">
     5       <label><input type="radio" checked="checked" value="1" class="form-radio" name="reportType">垃圾广告</label>
     6       <label><input type="radio" value="2" class="form-radio" name="reportType">色情</label>
     7       <label><input type="radio" value="3" class="form-radio" name="reportType">虚假广告</label>
     8       <label><input type="radio" value="4" class="form-radio" name="reportType">其他</label>
     9     </div>
    10   </div>
    11 </form>

      

     1 /*reset form elements*/
     2 input, select, label {
     3     vertical-align:middle;
     4 }
     5 /*reset form radio & checkbox*/
     6 .form-radio,.form-checkbox{
     7     margin:0 5px 0 0;/*与右侧文字的间距*/
     8     padding:0;
     9     width:13px;
    10     height:13px;
    11     vertical-align:middle;
    12     font:13px Helvetica, Arial, sans-serif;
    13 }

      用vertical-align是,因为谷歌和ie8,9浏览器看起来是设置的line-height,可是根本不管用,而且这个还需要考虑你用的字体大小,再做调整,因为ie7表现都一直很良好,所以需要对ie6进行hack处理。下面是修正问题的css代码:

     1 #demo1fix .form-radio{/*font-size:12px*/
     2     vertical-align:-2px;
     3     *vertical-align:middle;/*ie7 ie6*/
     4     _vertical-align:3px;/*ie6*/
     5 }
     6 #demo2fix .form-radio{/*font-size:13px*/
     7     vertical-align:-2px;
     8     *vertical-align:middle;/*ie7 ie6*/
     9     _vertical-align:3px;/*ie6*/
    10 }
    11 #demo3fix .form-radio{/*font-size:14px*/
    12     vertical-align:-1px;
    13     *vertical-align:middle;/*ie7 ie6*/
    14     _vertical-align:2px;/*ie6*/
    15 }
    16 #demo4fix .form-radio{/*font-size:16px*/
    17     vertical-align:0;
    18     *vertical-align:middle;/*ie7 ie6*/
    19     _vertical-align:3px;/*ie6*/
    20 }

    还有一种方法是用float方法,就是label,float:left,然后把提示文本外面再包层span,把这个span也浮动float:left

     1 <form id="demo6" class="demo form-horizontal" name="demo6" method="post" action="#">
     2    <div class="form-item form-radio-checkbox-wrap">
     3      <label>兴趣爱好:</label>
     4     <div class="form-field">
     5        <label><input type="checkbox" checked="checked" value="1" class="form-checkbox" name=""><span>音乐</span></label>
     6        <label><input type="checkbox" value="2" class="form-checkbox" name=""><span>小说</span></label>
     7        <label><input type="checkbox" value="3" class="form-checkbox" name=""><span>上网</span></label>
     8         </div>
     9     </div>
    10 </form>
     1 #demo6{
     2     overflow:auto;*zoom:1;
     3 }
     4 .form-horizontal label{
     5     float: left;
     6     text-align: right;
     7     font-weight:bold;
     8     width:100px;
     9     font-size:16px;
    10     line-height:24px;
    11 }
    12 .form-horizontal .form-field{
    13     float:left;
    14 }
    15 .form-radio-checkbox-wrap .form-field label{
    16     text-align: left;
    17     width: auto;
    18     font-weight:normal;
    19     margin:0 10px 0 0;
    20     float:left;
    21     display:inline;
    22 }
    23 .form-radio-checkbox-wrap .form-checkbox,
    24 .form-radio-checkbox-wrap span{
    25     float:left;
    26     display:inline;
    27 }
    28 .form-radio-checkbox-wrap .form-checkbox{
    29     margin-right:5px;
    30     margin-top:5px;
    31 }

    要是想看详情,还是看为之哥的经典:http://www.w3cplus.com/solution/formradio/formradio.html

  • 相关阅读:
    基于序列号注册的软件框架
    JavaScript基础 实例和框架集成
    jQuery使用总结 Core jQuery 其他 4/4
    Microsoft AJAX Client Library规范的实例
    JavaScript DOJO使用总结
    Java语法专题3: HashMap
    html中的fieldset
    HTML.ActionLink 和 Url.Action 的区别
    [System.InvalidOperationException] = {"阅读器关闭时尝试调用 MetaData 无效。"}
    虚拟属性
  • 原文地址:https://www.cnblogs.com/different/p/2819384.html
Copyright © 2020-2023  润新知