HTML/CSS : Styling a checkbox inside a form

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. 为什么复选框和文本框右边的文本之间有那么大的空间？文本需要直接位于复选框的右侧，填充可能为 20 像素。我还需要该文本垂直居中
3. 为什么文本没有换行？与所有其他输入一样，复选框和文本的宽度应为 80%。

希望你能帮助我。

Answer 1

https://jsfiddle.net/p04prk6p/这是你需要的。只需在其周围放置一个 div

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>