CSS 表单 - 输入宽度不起作用

CSS forms - input width not working

提问by jkcl

The following css:

以下css：

#contactform {
    width: 400px;
    height: 215px;
}

.webform {
}

.webform input .name {
    width: 50px;
}

.webform input .email {
    width: 70px;
}

.webform input .comments {
    width: 200px;
}

when used in html as

当在 html 中使用时

    <div id="contactform">
        <div class="webform">
            <input class="name" name="Name" type="text" id="senderName" placeholder="Enter your name here">
            <input class="email" name="Email" type="text" id="senderEmail" placeholder="Enter a valid email adress here">
            <br>
            <input class="comments" name="Comments" type="text" id="senderComments" placeholder="Comments...">
        </div>
    </div>

produces all three input field of the same width (50px = that is, the width of the webform input). I'm not sure what I'm doing wrong. Help?

生成所有三个相同宽度的输入字段（50px = 即 的宽度webform input）。我不确定我做错了什么。帮助？

采纳答案by albert

your classes are on your inputs, not on child elements of the inputs. so change input .name, etc., to input.nameor just .name, repeat for all three. :)

您的课程在您的inputs 上，而不是在 s 的子元素上input。因此input .name，将 等更改为input.name或只是.name，对所有三个重复。:)

回答by Zoltan Toth

remove the whitespace between your input and class name

删除输入和类名之间的空格

.webform input.name {
    width: 50px;
}

.webform input.email {
    width: 70px;
}

.webform input.comments {
    width: 200px;
}

Try this fiddle

试试这个小提琴