Question

以下css：

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

.webform {
}

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

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

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

在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>

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

Answer 1

您的课程位于input，而不是input的子元素。所以将input .name等更改为input.name或仅.name，重复所有三项。：）

Answer 2

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

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

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

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

试试这个fiddle

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

2 个答案: