对齐复选框和标签答案

【问题标题】：Align checkbox and label对齐复选框和标签
【发布时间】：2012-10-24 03:29:27
【问题描述】：

我有一个代码如下所示的表单：

<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>

并且使用以下 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;
}

如您所见，复选框位于标签顶部。我希望两者都“在同一条线上”。因此，它看起来像“[] 接受条款”。以及如何使文本与复选框垂直对齐。

我怎么能两者兼得？

你可以在这里看到它：form, checkbox failing

【问题讨论】：

请在不让问题消失的情况下删除任何内容。这将使我们更容易解决问题，谁知道呢，您可能会在此过程中自己找出问题所在。

标签： html css checkbox

【解决方案1】：

这是因为标签上有display: block。这意味着（没有浮动或黑客）它将声称自己的行。
将其更改为 display: inline-block 或离开显示规则，您就完成了。

看到您有意为前两个标签执行此操作，您应该为 accept the terms 标签指定一个 id 并使用 form #accepttermslabel {display: inline-block}。这将覆盖其他规则等，因为它更具体。

【讨论】：

如果我这样做了，那么发送按钮会出现在标签的右侧...正如您在此处看到的：jsfiddle.net/CRg93
然后为发送按钮执行display: block。 @HommerSmith
好吧...为什么选择 inline-block 而不是 inline？
inline-block 允许元素具有定义的width 或height。

【解决方案2】：

将您的复选框和文本包装在 <label> 标记中。与您当前的 CSS 一起使用，如 jsFiddle Demo 中所示。

<label for="checkbox">
    <input id="checkbox" type="checkbox"> My Label
</label>

【讨论】：

我不认为这就是标签的含义。
这是我一直标记复选框和单选元素的方式......我已经看到它多次使用这种方式。他要求一种将其水平对齐的方法。这解决了他的答案。
那你解释一下attribute是干什么用的。
如果您不知道属性是什么，那么您为什么要评论我的非语义正确方式？ :P
这是一个完美且有效的 HTML5 表示法。你甚至可以省略forattribute。但是，它并不能真正解决相关问题（对齐）。

【解决方案3】：

只需要一点点改动即可将您的小提琴 here 分叉。我将复选框嵌套在标签内。

    <label for="agree"><input type="checkbox" name="agree">Accept the terms</label>

希望对你有帮助。

【讨论】：

刚刚运行了验证器，它是有效的。
它可能是有效的，但这并不意味着它在语义上是合适的。它只是意味着没有错误。
在哪里可以检查并了解它在语义上是否合适？
W3 和 WHATWG 的 HTML5 规范都明确声明您可以通过将标签放在标签内来指定标签的目标。请参阅dev.w3.org/html5/spec/single-page.html#the-label-element 和developers.whatwg.org/forms.html#the-label-element（尽管您这样做时不会使用for）。

【解决方案4】：

您只需将display: inline 添加到label。像这样：

label[for="agree"] {
  display: inline;
}

您可能还需要添加以下内容以使Send 按钮保持在自己的行中：

button[type="submit"] {
  display: block;
}

这足以让它工作，但您也可以将input 嵌套在label 中，如下所示：

<label for="agree">
  <input type="checkbox" name="agree" />
  Accept the terms
</label>

但是，大多数人避免这样做，因为它在语义上会受到限制。我会选择第一种方法。

【讨论】：

您自己说同意并且您将输入复选框放在标签元素中
@RandomGuy 我说有可能，但是如果你读了最下面的那句话，我说它在语义上是不正确的。
乔恩，感谢您的回答。我喜欢将它内联，但这使得“发送”按钮也内联。所以它最终会像这样jsfiddle.net/CRg93 -- 另外，为什么是 inline 而不是 inline-block？
我更喜欢使用inline 而不是inline-block 语义。 inline-block 的意思是当你想在内联元素上使用块元素样式时，在这种情况下这不是必需的。但是如果你确实想要块元素样式（例如宽度、高度等），那么你应该使用inline-block。

【解决方案5】：

一种选择是修改复选框后面的label 元素的样式：

input[type=checkbox] + label {
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 2em;
    line-height: 1em;
}

JS Fiddle demo.

然而，这有点脆弱，因为margins 有点随意（margin-right 纯粹是为了将下面的button 强制到下一行）。此外，attribute-equals 选择器可能会导致旧浏览器出现问题。

正如所暗示的，在 cmets 中，Mr. Alien 实际上更容易使用此选择器符号来定位复选框本身：

input[type=checkbox] {
    float: left;
    margin-right: 0.4em;
}

JS Fiddle demo.

【讨论】：

在这种情况下，我猜这也足够了input[type=checkbox] { /* Styles */ }
这取决于要设置样式的元素，真的。我选择定位 label 而不是复选框，但是，是的，设置复选框本身的样式同样有效（并且可能更容易）。

【解决方案6】：

在复选框列表上设置一个类，如下所示：

<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>

然后添加以下 CSS：

.FilterCheck td {
    white-space:nowrap !important;
}

这可确保标签与复选框保持在同一行。

【讨论】：

【解决方案7】：

我在使用 bootstrap 3 水平表单时遇到了同样的问题，最后找到了一个尝试错误的解决方案，并且也可以使用普通的 html-css。检查我的Js Fiddle Demo

.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>

【讨论】：

【解决方案8】：

试过flex attribute？这是your example with flex 添加的：

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 允许使用例如 div 来控制表格样式。

【讨论】：

【解决方案9】：

我发现让复选框和标签对齐的最简单方法是：

    .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>

【讨论】：

【解决方案10】：

我知道这篇文章已经过时了，但我想帮助那些将来会看到这篇文章的人。答案很简单。

<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>

【讨论】：