如何在引導程序中將水平文本與單選按鈕和復選框對齊
[英]how to align horizontal text with radio button and checkbox in bootstrap
問題描述
我正在嘗試使文本與單選按鈕和復選框對齊。 我正在使用引導程序來設置頁面布局。 請標記並更正我的代碼。 我已經添加了片段以獲取更多詳細信息。 我需要所有單選按鈕與文本水平對齊。
input[type="checkbox"], input[type="radio"] { padding: 0; box-sizing: border-box; width: 30px; height: 30px; background-color: #edf8f7; /* background-image: none; */ border: 1px solid #8dc6cd; border-radius: 0px; } input[type=checkbox], input[type=radio] { margin: 4px 0 0; margin-top: 1px\\9; line-height: normal; } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } input { line-height: normal; } button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="radio" i] { margin: 3px 3px 0px 5px; } input[type="radio" i] { -webkit-appearance: radio; box-sizing: border-box; } input[type="radio" i], input[type="checkbox" i] { background-color: initial; margin: 3px 0.5ex; padding: initial; border: initial; } input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; user-select: text; cursor: auto; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 13.3333px Arial; } input, textarea, select, button, meter, progress { -webkit-writing-mode: horizontal-tb; } label { display: inline-block; margin-bottom: 5px; /* font-weight: bold; */ color: #6b7b8a; font-size: 18px; font-weight: bold; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } body { background: #fff; font-family: 'Roboto', sans-serif; color: #54667a; line-height: 22px; } body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; }
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <section id="listing"> <form id="frmR" action="#" method="post"> <h4> Type</h4> <div class="row"> <div class="col-xs-12" > <div class="col-xs-4"> <div > <label class=""> Type</label> <label ><input type="radio" name="Type" checked="" value="Walk-In">Walk-In</label> <label ><input type="radio" name="Type" value="Telephonic">Telephonic</label> </div> </div> </div> </form> </section> <hr /> <section id="bottom"> </div> </section> </body> </html>
1 個解決方案
解決方案1
2 已采納 2017-07-01 08:45:46
您可以使用vertical-align屬性來設置元素的垂直對齊方式。 下面是您的問題的代碼
input[type="checkbox"], input[type="radio"] { padding: 0; box-sizing: border-box; width: 30px; height: 30px; background-color: #edf8f7; /* background-image: none; */ border: 1px solid #8dc6cd; border-radius: 0px; } input[type=checkbox], input[type=radio] { margin: 4px 0 0; margin-top: 1px\\9; line-height: normal; } input[type=checkbox], input[type=radio] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; } button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; } input { line-height: normal; } button, input, optgroup, select, textarea { margin: 0; font: inherit; color: inherit; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } input[type="radio" i] { margin: 3px 3px 0px 5px; } input[type="radio" i] { -webkit-appearance: radio; box-sizing: border-box; } input[type="radio" i], input[type="checkbox" i] { background-color: initial; margin: 3px 0.5ex; padding: initial; border: initial; } input { -webkit-appearance: textfield; background-color: white; -webkit-rtl-ordering: logical; user-select: text; cursor: auto; padding: 1px; border-width: 2px; border-style: inset; border-color: initial; border-image: initial; } input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; font: 13.3333px Arial; } input, textarea, select, button, meter, progress { -webkit-writing-mode: horizontal-tb; } label { display: inline-block; margin-bottom: 5px; /* font-weight: bold; */ color: #6b7b8a; font-size: 18px; font-weight: bold; } label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; } body { background: #fff; font-family: 'Roboto', sans-serif; color: #54667a; line-height: 22px; } body { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.42857143; color: #333; background-color: #fff; } label>input[type="radio"]{ vertical-align: -30%; }
<html> <head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <section id="listing"> <form id="frmR" action="#" method="post"> <h4> Type</h4> <div class="row"> <div class="col-xs-12" > <div class="col-xs-4"> <div > <label class=""> Type</label> <label ><input type="radio" name="Type" checked="" value="Walk-In">Walk-In</label> <label ><input type="radio" name="Type" value="Telephonic">Telephonic</label> </div> </div> </div> </form> </section> <hr /> <section id="bottom"> </div> </section> </body> </html>
如何對齊此自舉單選按鈕？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.