zoukankan      html  css  js  c++  java
  • 一个checkbox细节处理方式(checkbox与后面的文字对其)

    两点细节:

    1、checkbox和文字的中线重合

    2、点文字可对checkbox发生作用

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>动态分页</title>
    <style type="text/css">
    label.label-16px {
    display: inline-block;
    font-family: tahoma;
    vertical-align: middle;
    font-size: 16px;
    line-height: 100%;
    }

    label.label-16px input {
    margin: 0;
    padding: 0;
    outline: medium none;
    }

    label.label-14px {
    display: inline-block;
    font-family: tahoma;
    vertical-align: middle;
    font-size: 14px;
    }

    label.label-14px input {
    margin: 3px 3px 0 0;
    padding: 0;
    outline: medium none;
    display: inline-block;
    float: left;
    }

    label.label-12px {
    display: inline-block;
    font-family: tahoma;
    vertical-align: middle;
    font-size: 12px;
    }

    label.label-12px input {
    margin: 2px 2px 0 0;
    padding: 0;
    outline: medium none;
    float: left;
    }
    </style>

    </head>
    <body>
    <label class="label-16px">
    <input type="checkbox"/>
    描述文字默认 </label>
    <label class="label-14px">
    <input type="checkbox"/>
    描述文字14px字体 </label>
    <label class="label-12px">
    <input type="checkbox"/>
    描述文字12px字体 </label>
    </body>

    两点启示:

    1、代码有些冗余,但是能保证其稳定性

    2、组合可以减少代码量,应用灵活,但是在规范不健全的情况下保证自己的代码健壮,不污染别人的代码尤为重要

    简易处理:


    .con-label-checkbox {
    font-size: 12px;
    }

    .label-checkbox {
    vertical-align: middle;
    font-family: tahoma;
    font-weight: normal;
    }

    .label-checkbox input {
    vertical-align: middle;
    outline: none;
    outline: 0;
    margin-right: 2px;
    }

  • 相关阅读:
    (转载)UITableView的详细讲解
    (转载)ios关闭虚拟键盘的几种方法
    (转载)NSTimer
    (转)FirstResponder 释放问题
    (转)IOS UITableView学习
    UITableView中的(NSIndexPath *)indexPath
    iOS开发UITableView基本使用方法总结1
    xcode快捷键的使用
    k8s1.13.0二进制部署-master节点(三)
    k8s1.13.0二进制部署-node节点(四)
  • 原文地址:https://www.cnblogs.com/longze/p/2973227.html
Copyright © 2011-2022 走看看