标签和输入框在表单中颠倒

Question

我有一个联系我们表格，对于姓名和电子邮件地址，标签和输入框显示得很好，垂直对齐并且具有相同的边距。但是，稍后在表单中（以“主题”开头），输入框首先出现，然后是标签，不知何故它被颠倒了（？）。如何解决它看起来与姓名和电子邮件地址相同的结构？

附上我的小提琴...Fiddle

HTML：

    <form>

        <div class="contactus-name">
            <label accesskey="n" for="Name">Name</label> <input maxlength=
            "60" name="name" type="text">
        </div>

        <div class="contactus-email">
            <label accesskey="e" for="email">Email addressing</label>
            <input maxlength="40" name="email" size="40" type="text">
        </div>

        <div class="contactus-subject">
            <label accesskey="s" for="reason">Subject</label> <select name=
            "reason">
                <option value="1">
                    One
                </option>

                <option value="2">
                    Two
                </option>

                <option value="3">
                    Three
                </option>
            </select>
        </div>

        <div class="contactus-comments">
            <label accesskey="c" for="comments">Comments</label> 
            <textarea cols="50" name="comments" rows="8">
</textarea>
        </div>

        <div class="contactus-antispam">Enter anti-spam code:<br>
        <img alt="verification code" border="1" src="image"></div>

        <div class="contactus-antispam-code">
            <label accesskey="c" for="vericode">Code</label> <input name=
            "vericode" size="20" type="text">
        </div>

        <div class="contactus-submit">
            <input name="submit" type="submit" value="Send">
        </div>
    </form>

CSS

.contactus {
    position:relative;
    display:block;
    text-align:left;
    border-style:dashed;
}

.contactus-name {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-name label {
    float:left;
    margin-right:4.0em;
    display: block;
    width:10em;
}

.contactus-email {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-email label {
    float:left;
    margin-right:4.0em;
    display: block;
    width:10em;
}

.contactus-subject {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-subject select {
    float:left;
    display:block;
    width:10em;
    margin-right:4.0em;
}

.contactus-comments {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-comments textarea {
    float:left;
    display:block;
    width:10em;
    margin-right:4.0em;
}

.contactus-antispam {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-antispam-code {
    padding-left:40px;
    padding-bottom:5px;
}

.contactus-antispam-code label {
    float:left;
    display:block;
    width:10em;
    margin-right:4.0em;
}

Answer 1

因为.contactus-subject select 有float:left 而它的label 没有。

添加这个css类：

.contactus-subject label{
    float:left;
    width: 10em;
    width:10em;
    margin-right:4.0em;
}

也许删除旧的

Answer 2

你错误地将 css 应用到了错误的元素上。

代替：

.contactus-subject select {

你需要做的

.contactus-subject label{

等等所有颠倒的元素。

在这些类的其余样式属性中，您有float:left，您将其应用于文本框并选择而不是描述标签。

float:left 将元素浮动到最左侧，并且由于您已将其应用于 select/textarea，因此它将它们发送到最左侧。