对齐复选框和标签

时间:2012-11-03 19:34:38

标签: html css checkbox

我有一个代码如下的表单:

<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

10 个答案:

答案 0 :(得分:8)

一个选项是修改复选框后面的label元素的样式:

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

JS Fiddle demo

然而,这有点脆弱,因为margin s有点武断(而margin-right纯粹是为了迫使下面的button到下一行)。此外,属性等于选择器可能会导致旧浏览器出现问题。

正如暗示的那样,在Alien先生的评论中,使用这种选择符表示方法实际上更容易定位复选框本身:

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

JS Fiddle demo

答案 1 :(得分:1)

这是因为标签上有display: block。这意味着(没有浮动或黑客)它会声称它自己的行 将其更改为display: inline-block或将显示规则保留,您就完成了。

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

答案 2 :(得分:1)

<label>标记中包含您的复选框和文字。与您当前的CSS一起使用,如jsFiddle Demo中所示。

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

答案 3 :(得分:0)

用一个小小的改动把你的小提琴here分开。我嵌套了标签内的复选框。

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

希望它有所帮助。

答案 4 :(得分:0)

您需要做的只是将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>

然而,大多数人都避免这样做,因为它在语义上是紧缩的。我会选择第一种方法。

答案 5 :(得分:0)

在复选框列表中设置一个类,如下所示:

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

然后添加以下CSS:

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

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

答案 6 :(得分:0)

我遇到了与bootstrap 3 horizo​​ntal-form相同的问题,最后找到了一个try-error解决方案,并且也使用普通的html-css。 查看我的Js Fiddle Demo

&#13;
&#13;
.remember {
    display: inline-block;
}
.remember input {
    position: relative;
    top: 2px;
}
&#13;
<div>
    <label class="remember" for="remember_check">
        <input type="checkbox" id="remember_check" /> Remember me
    </label>
</div>
&#13;
&#13;
&#13;

答案 7 :(得分:0)

试过your example with flex? 这里添加了this

  1. 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>
    
  2. 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;
    }
    
  3. Flex允许使用div来控制表样式。

答案 8 :(得分:0)

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

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

答案 9 :(得分:0)

我知道这篇文章很老,但我想帮助那些将来会看到这个的人。答案非常简单。

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