美文网首页
css input[radio][checkbox] 与文字对齐

css input[radio][checkbox] 与文字对齐

作者: 红尘耽搁的佛系少年 | 来源:发表于2018-07-14 17:57 被阅读0次

    每次遇到 checkbox和文字对齐就要想半天。于是痛下决心,把它整理出来,希望以后不会再忘记。

    其实主要是文本和check都设置同一个属性

    vertical-align: middle;
    

    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <ul>
        <li><label><input name="radio" type="radio"><span>佛系少年</span></label></li>
        <li><label><input name="radio" type="radio"><span>红尘浪子</span></label></li>
    </ul>
    <ul>
        <li><label><input type="checkbox"><span>美女</span></label></li>
        <li><label><input type="checkbox"><span>美食</span></label></li>
    </ul>
    </body>
    <style>
        /** 加上这个属性就可以对齐了 **/
        ul > li > label > input[type=radio], input[type=checkbox], span {
            vertical-align: middle;
        }
    
        /** radio 有点皮,所以还要加这个 **/
        ul > li > label > input[type=radio] {
            margin-top: 2px;
        }
    
        /** 设置  radio,checkbox的大小 **/
        input[type=radio], input[type=checkbox] {
            width: 20px;
            height: 20px;
        }
    
        /** ul的显示样式 */
        ul > li {
            list-style: none;
            text-align: left;
            font-size: 20px;
        }
    </style>
    </html>
    
    

    效果如下:


    相关文章

      网友评论

          本文标题:css input[radio][checkbox] 与文字对齐

          本文链接:https://www.haomeiwen.com/subject/qrbypftx.html