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;
    }

  • 相关阅读:
    详解javascript的深拷贝与浅拷贝
    fis3+vue+pdf.js制作预览PDF文件或其他
    那一年,2020
    H5移动端IOS/Android兼容性总结,持续更新中…
    浏览器里点击复制到剪贴板的小方法
    elementUI upload 对图片的宽高做校验
    CSS实现核辐射警告标志
    github常用命令
    偶遇vue-awesome-swiper的坑
    gauge+python+vscode搭建自动化测试框架
  • 原文地址:https://www.cnblogs.com/longze/p/2973227.html
Copyright © 2011-2022 走看看