输入框和按钮的宽度相同，但我不想要答案

【问题标题】：Input box and button have the same width, but I don't want it输入框和按钮的宽度相同，但我不想要
【发布时间】：2012-09-07 11:31:06
【问题描述】：

html:

<form id="personal_info" action="..." method="post">
    <legend>Personal info</legend>
    <p>
        <label for="fullname">Your name: </label>
        <input name="fullname" id="fullname" type="text" tabindex="1" />
    </p>
    <p>
        <label for="email">Your e-mail: </label>
        <input name="email" id="email" type="text" tabindex="2" />
    </p>
    <p><input id="send" type="submit" value="Send" /></p>
</form>

css:

form#personal_info {
    background:#dee;
    width:470px;
    padding:10px;
    border:1px solid #000;
    margin:0;
}
form#personal_info legend {
    font-family:georgia, sans-serif;
    font-size:1.1em;
    font-weight:bold;
    border:3px solid #fff;
    margin-bottom:5px;
    padding:3px;
    width:270px;
    background:#fff url(legend.gif) repeat-x center left;
}
form#personal_info label {
    clear:left;
    display:block;
    float:left;
    width:100px;
    text-align:right;
    padding-right:10px;
    color:#888;
    margin-bottom:0.5em;
}
form#personal_info input {
    border:1px solid #fff;
    background:#fff url(legend.gif) repeat-x top left;
    padding-left:0.5em;
    margin-bottom:0.6em;width:300px;
}
form#personal_info #button1 {
    color:#c00;
    padding-right:0.5em;
    cursor:pointer;
    margin-left:8px;
    width:100px;
}
form#personal_info #button1:hover {
    background-position:center left;
    color:#000;
    width:100px;
}

输入和按钮的宽度相同，均为 300 像素，但我希望按钮的宽度为 100 像素。怎么了？

【问题讨论】：

我没有在 CSS 中看到任何与您的提交元素匹配的按钮或任何东西，这些元素会告诉它是 100 像素
@DSblizzard 我希望你明白错误是什么。
是的，我想。我将 'id="send"' 替换为 'id="button1"'

标签： css

【解决方案1】：

See Demo

如果您只是将样式应用于input，它会将这些样式应用于所有input 元素，例如textbox、button，因为它们是输入元素。

您应该使用id's 来唯一地应用样式。

使用#button 并不意味着这些样式将应用于buttons。

您可以做的是为您的输入元素分配 id，然后相应地应用样式

<input id="txtEmail" type="text"/>
<input id="btnSend" type="submit"/>

CSS：

#txtEmail
{
//your styles
}

#btnSend
{
//your styles
}

或者你可以做这样的事情

input[type="text"]
{
//your styles
}    

input[type="submit"]
{
//your styles
}

【讨论】：

【解决方案2】：

您可以指定规则应更改的输入类型：

输入[type='text']

此外，如果您在 CSS #id 中使用 ID，则无需在它们前面加上任何前缀 - 这无济于事！

【讨论】：