Html 对齐复选框和标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13212737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align checkbox and label
提问by Hommer Smith
I have a form which code looks like this:
我有一个代码看起来像这样的表单：
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>?
And which is styled with the following CSS:
并使用以下 CSS 设置样式：
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
?As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
?如您所见，复选框位于标签顶部。我希望两者都“在同一条线上”。因此，它看起来像“[ ] 接受条款”。以及如何使文本与复选框垂直对齐。
How could I do both?
我怎么能两者兼得？
You can see it live here: form, checkbox failing
你可以在这里看到它：表单，复选框失败
回答by David says reinstate Monica
One option is to amend the style of the labelelement that follows the checkbox:
一种选择是修改label复选框后面元素的样式：
?input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-rightis purely to force the following buttonto the next line). Also the attribute-equals selector may cause problems in older browsers.
然而，这有点脆弱，因为margins 有点随意（并且margin-right纯粹是为了强制以下行button到下一行）。此外，attribute-equals 选择器可能会导致旧浏览器出现问题。
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
正如所暗示的，在 Alien 先生的评论中，使用此选择器符号实际上更容易定位复选框本身：
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
回答by 11684
It is because the label has display: blockon it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-blockor leave the display rule away and you're done.
因为上面有标签display: block。这意味着（没有浮动或黑客）它将声称它自己的线路。
将其更改为display: inline-block或离开显示规则，您就完成了。
Seeing you did this intentionally for the first two labels, you should give the accept the termslabel an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
看到您对前两个标签有意这样做，您应该给accept the terms标签一个 id 并使用form #accepttermslabel {display: inline-block}. 这将覆盖其他规则 et 因为它更具体。
回答by Pastor Bones
Wrap your checkbox and text within the <label>tag. Works with your current CSS as seen here in this jsFiddle Demo.
将复选框和文本包裹在<label>标签内。与您当前的 CSS 一起使用，如此jsFiddle Demo 中所示。
<label for="checkbox">
?<input id="checkbox" type="checkbox"> My Label
</label>??????????????????????????
回答by Marko Francekovic
回答by Jon Egeland
All you need to do is add display: inlineto the label. Like this:
您需要做的就是添加display: inline到label. 像这样：
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Sendbutton to stay on its own line:
您可能还需要添加以下内容以使Send按钮保持在自己的行上：
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the inputinside the label, like this:
这足以使其工作，但您也可以将 嵌套在input内部label，如下所示：
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
但是，大多数人避免这样做，因为它在语义上受到限制。我会选择第一种方法。
回答by Tarak
Set a class on the checkbox list as follows:
在复选框列表上设置一个类，如下所示：
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
然后添加以下 CSS：
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
这确保标签与复选框保持在同一行。
回答by rernesto
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too. Check my Js Fiddle Demo
我在 bootstrap 3 水平表单上遇到了同样的问题，最后找到了一个尝试错误的解决方案，并且也可以使用普通的 html-css。检查我的Js Fiddle 演示
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>回答by Tim Huesken
Tried the flex attribute? Here's your example with flexadded:
HTML
<div id="right_sidebar"> <form id="send_friend" name="send_friend" action="#" method="post" style="display: block; "> <fieldset> <label for="from">From</label> <input type="text" name="from" id="from" value=""> <label for="to">To</label> <input type="text" name="to" id="to"> <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a> </label> <textarea name="msg" id="msg" rows="7"></textarea> <div class="row"> <div class="cell" float="left"> <input type="checkbox" name="agree"> </div> <div class="cell" float="right" text-align="left"> <label for="agree">Accept the terms</label> </div> </div> <button class="blue_button" type="submit">Send</button> </fieldset> </form> </div>CSS
body { color: #333; font: 12px Arial, Helvetica Neue, Helvetica, sans-serif; } [class="row"] { display: flex; flex-flow: row wrap; margin: 2 auto; } [class="cell"] { padding: 0 2px; } #right_sidebar { padding-top: 12px; width: 190px; position:relative; } form { background: #EEF4F7; border: solid red; border-width: 1px 0; display: block; margin-top: 10px; padding: 10px; } form label { color: #435E66; display:block; font-size: 12px; } form textarea { border: 1px solid #ABBBBE; margin-bottom: 10px; padding: 4px 3px; width: 160px; -moz-border-radius: 3px; border-radius: 3px; } form label a { display: block; padding-left: 10px; position: relative; text-decoration: underline; } form label a .sp { background: #EEF4F7; height: 0; left: 0; position: absolute; top: 2px; width: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #333; } form button.blue_button { margin-top: 10px; vertical-align: top; } button.blue_button { color: white; font-size: 12px; height: 22px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } button.blue_button { background-color: #76C8C6; border: 1px solid #7798B7; text-shadow: 1px 1px 0px #567C9E; }
HTML
<div id="right_sidebar"> <form id="send_friend" name="send_friend" action="#" method="post" style="display: block; "> <fieldset> <label for="from">From</label> <input type="text" name="from" id="from" value=""> <label for="to">To</label> <input type="text" name="to" id="to"> <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a> </label> <textarea name="msg" id="msg" rows="7"></textarea> <div class="row"> <div class="cell" float="left"> <input type="checkbox" name="agree"> </div> <div class="cell" float="right" text-align="left"> <label for="agree">Accept the terms</label> </div> </div> <button class="blue_button" type="submit">Send</button> </fieldset> </form> </div>CSS
body { color: #333; font: 12px Arial, Helvetica Neue, Helvetica, sans-serif; } [class="row"] { display: flex; flex-flow: row wrap; margin: 2 auto; } [class="cell"] { padding: 0 2px; } #right_sidebar { padding-top: 12px; width: 190px; position:relative; } form { background: #EEF4F7; border: solid red; border-width: 1px 0; display: block; margin-top: 10px; padding: 10px; } form label { color: #435E66; display:block; font-size: 12px; } form textarea { border: 1px solid #ABBBBE; margin-bottom: 10px; padding: 4px 3px; width: 160px; -moz-border-radius: 3px; border-radius: 3px; } form label a { display: block; padding-left: 10px; position: relative; text-decoration: underline; } form label a .sp { background: #EEF4F7; height: 0; left: 0; position: absolute; top: 2px; width: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 4px solid #333; } form button.blue_button { margin-top: 10px; vertical-align: top; } button.blue_button { color: white; font-size: 12px; height: 22px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } button.blue_button { background-color: #76C8C6; border: 1px solid #7798B7; text-shadow: 1px 1px 0px #567C9E; }
Flex allows for table style control with the use of divs for example.
例如，Flex 允许使用 div 来控制表格样式。
回答by dok
The simplest way I found to have the checkbox and the label aligned is :
我发现将复选框和标签对齐的最简单方法是：
.aligned {
vertical-align: middle;
} <div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>回答by dok
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
我知道这篇文章很旧，但我想帮助那些将来会看到这个的人。答案很简单。
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>