我正在尝试将文字与单选按钮和复选框对齐。我正在使用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>
&#13;
答案 0 :(得分:2)
您可以使用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>