Label and input box are reversed in form

I have a contact us form and for Name and Email addressing, the labels and input boxes show nicely, vertically aligned and having the same margin. However, later in the form (starting with "Subject"), the input box comes first and thereafter the label, somehow it got reversed (?). How to fix that it everything looks as same structure as Name and Email addressing?

我有一个联系我们表格,对于姓名和电子邮件寻址,标签和输入框显示很好,垂直对齐并具有相同的边距。但是,稍后在表单中(从“主题”开始),输入框首先出现,然后是标签,不知何故它被反转(?)。如何解决它看起来与名称和电子邮件寻址相同的结构?

Attached my Fiddle... 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;
}

2 个解决方案

#1

you applied the css to the wrong elements by mistake.

你错误地将css应用于错误的元素。

instead of:

.contactus-subject select {

you needed to do

你需要做的

.contactus-subject label{

and so on with all the reversed elements.

所有相反的元素等等。

among the rest of the style attributes in those classes, you have float:left which you applied to the textbox and select instead of the description label.

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

float:left floats the element to the leftmost side, and since you have applied it to the select/textarea, it sent them to the very left.

float:left将元素浮动到最左侧,因为您已将它应用于select / textarea,所以它将它们发送到最左侧。

#2

Because .contactus-subject select has float:left and its label doesn't.

因为.contactus-subject选择有float:left而它的标签没有。

Add this css class:

添加此css类:

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

And perhaps delete the old one

也许删除旧的

#1