HTML / CSS：样式化表单内的复选框

Question

我有以下表格：

使用此HTML：

<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
    <input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
    <br>
    <input id="user_save" type="submit" value="Speichern">
</form>

而这个CSS：

#user_form input[type="text"], input[type="email"], input[type="submit"] {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 50px !important;
    font-size: 18px;
    line-height: normal;
    line-height: 32px\0/;
    /* for IE 8 */
}

#user_form input[type="checkbox"] {
    width: 80%;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 50px !important;
}

我不明白的是：

1. 为什么复选框未对齐到左侧。 复选框的左侧不应有填充。 我将边距和填充设置为0。
2. 为什么复选框和文本框右侧的文本之间有这么大的空间？ 文本需要直接位于复选框的右侧，并可能有20px的填充。 我还需要将文本垂直居中
3. 为什么文本没有换行？ 与所有其他输入一样，复选框和文本的宽度应为80％。

希望您能够帮助我。

Answer 1

https://jsfiddle.net/p04prk6p/这是您需要的。 只是在它周围分层

的CSS

#user_form input[type="text"], input[type="email"], input[type="submit"] {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 50px !important;
    font-size: 18px;
    line-height: normal;
    line-height: 32px\0/;
    /* for IE 8 */
}

#user_form input[type="checkbox"] {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 50px !important;
    float: left;
}

#checkbox_div {
    width: 80%;
    margin: 0 auto;
    line-height: 50px;
}

的HTML

<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
        <div id="checkbox_div"><input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</div>
    <br>
        <div style="clear: both"></div>
    <input id="user_save" type="submit" value="Speichern">
</form>

Answer 2

您遇到的问题是，复选框的宽度为80％。 这将导致它向右移动以及将文本向右推。

也不要使用!important ，在您的情况下就没有必要了。

为了使表单输入对齐，建议您将它们全部包装，然后将其留在左侧。 而不是使用0 auto将输入居中。 然后，您的复选框将与输入正确对齐。 您现在拥有它的方式，它将永远不会在将文本完全正确地保持正确的同时。

Answer 3

 #user_form input[type="text"], input[type="email"], input[type="submit"] { width: 80%; display: block; margin: 0 auto; height: 50px !important; font-size: 18px; line-height: normal; line-height: 32px\\0/; /* for IE 8 */ } .CheckBox{ width: 80%; text-align: center;} 

 <form id="user_form" name="user_form"> <input id="firstname" type="text" name="firstname" placeholder="Vorname" required> <br> <input id="lastname" type="text" name="lastname" placeholder="Nachname" required> <br> <input id="nickname" type="text" name="nickname" placeholder="Nickname" required> <br> <input id="email" type="email" name="email" placeholder="Email" required> <br> <p class="CheckBox"> <input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</p> <br> <input id="user_save" type="submit" value="Speichern"> </form> 

Answer 4

将复选框包装并在div中贴上标签，并将其宽度设置为80％。 您可以删除填充和边距规则。

复选框的高度使其无法与文本对齐。

文本不会自动换行，因为宽度设置为复选框，而不是文本。

 #user_form input[type="text"], input[type="email"], input[type="submit"] { width: 80%; display: block; margin: 0 auto; height: 50px !important; font-size: 18px; line-height: normal; line-height: 32px\\0/; /* for IE 8 */ } #user_form input[type="checkbox"] { display: inline; } .checkbox { margin: 0 auto; width: 80%; } 

 <form id="user_form" name="user_form"> <input type="text" id="firstname" name="firstname" placeholder="Vorname" required=""> <br> <input type="text" id="lastname" name="lastname" placeholder="Nachname" required=""> <br> <input type="text" id="nickname" name="nickname" placeholder="Nickname" required=""> <br> <input type="email" id="email" name="email" placeholder="Email" required=""> <br> <div class="checkbox"> <input type="checkbox" id="conditions" name="conditions" required=""> <label for "conditions"="">Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</label> </div> <br> <input type="submit" id="user_save" value="Speichern"> </form> 

Answer 5

 #user_form input[type="text"], input[type="email"], input[type="submit"] { width: 80%; display: block; margin: 0 auto; height: 50px !important; font-size: 18px; line-height: normal; line-height: 32px\\0/; /* for IE 8 */ } #user_form input[type="checkbox"] { width: 30px; display: inline; margin: 0; padding: 0; height: 50px; } 

 <form id="user_form" name="user_form"> <input id="firstname" type="text" name="firstname" placeholder="Vorname" required> <br> <input id="lastname" type="text" name="lastname" placeholder="Nachname" required> <br> <input id="nickname" type="text" name="nickname" placeholder="Nickname" required> <br> <input id="email" type="email" name="email" placeholder="Email" required> <br> <input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden! <br> <input id="user_save" type="submit" value="Speichern"> </form> 

您的问题是您的width属性。 复选框的宽高比为1：1。 所以给它一个30px的宽度就可以了。 80％真的很大

Answer 6

1：您的输入[type ='checkbox']的宽度为80％，使其为50px之类的正方形；

2：同样的问题，您输入的是父级宽度的80％和边距：0自动居中。

3：对于换行符，只有在像

Answer 7

<style>
#user_form input[type="text"], input[type="email"], input[type="submit"] {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 50px !important;
    font-size: 18px;
    line-height: normal;
    line-height: 32px\0/;
    /* for IE 8 */
}
label{
    width: 100%;
    float: left;
    text-align: center;
    margin: 20px 0px;
}
label > a{
    color: #2a00ff;
    z-index: 99999;

}
</style>
<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
    <label>
    <input id="conditions" type="checkbox" name="conditions" required>
    Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
    </label>
    <br>
    <input id="user_save" type="submit" value="Speichern">
</form>