Heim >Web-Frontend >HTML-Tutorial >单选框和复选框与文本垂直对齐_html/css_WEB-ITnose

单选框和复选框与文本垂直对齐_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:29:301753Durchsuche

现在的网站一般字体大小都是 12px,在 12px 下单选框和复选框与文本垂直居中对不齐,解决方法有很多,今天我整理了下最常用的 3 种方法。

html 结构:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>    <meta name="renderer" content="webkit"/>    <meta name="keywords" content=""/>    <meta name="description" content=""/>    <title>radio-and-checkbox-and-text-vertical-align</title>    <link rel="stylesheet" href="css/main.css"/></head><body>    <div class="demo">        <h2>单选框</h2>        <p><input type="radio" name="radio" id="radio1" class="input1"/><label for="radio1">解决方法一</label></p>        <p><input type="radio" name="radio" id="radio2" class="input2"/><label for="radio2">解决方法二</label></p>        <p><input type="radio" name="radio" id="radio3" class="input3"/><label for="radio3">解决方法三</label></p>        <h2>复选框</h2>        <p><input type="checkbox" name="checkbox" id="checkbox1" class="input1"/><label for="checkbox1">解决方法一</label></p>        <p><input type="checkbox" name="checkbox" id="checkbox2" class="input2"/><label for="checkbox2">解决方法二</label></p>        <p><input type="checkbox" name="checkbox" id="checkbox3" class="input3"/><label for="checkbox3">解决方法三</label></p>    </div></body></html>

scss:

@charset "utf-8";@import "core/config";@import "core/reset";.demo {    margin:50px;    font-size:12px;    font-family:SimSun;    h2 {        font-size:20px;    }    p {        margin:20px;        input {            margin-right:5px;        }        .input1 {            height:13px;            margin-top:0;            vertical-align:text-top;        }        .input2 {            margin-top:-2px;            vertical-align:middle;        }        .input3 {            vertical-align:-3px;        }    }}

效果如图所示:

测试浏览器:chrome,firefox,ie7-10

参考资料: 复选框单选框与文字对齐问题的研究与解决

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn