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>