ホームページ > 記事 > ウェブフロントエンド > text_html/css_WEB-ITnose と縦に整列したラジオとチェックボックス
text_html/css_WEB-ITnose と縦に整列したラジオとチェックボックス
- WBOYオリジナル
- 2016-06-24 11:29:301696ブラウズ
現在、Web サイトの一般的なフォント サイズは 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; } }} 効果は図に示すとおりです:
テストブラウザ: firefo x、ie7-10
参照: チェックボックスのラジオボタンとテキストの配置の問題の研究と解決策
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。