輸入框和按鈕的寬度相同，但我不希望它

Question

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像素的寬度相同，但我想按鈕爲100px寬。怎麼了？

Answer 1

See Demo

如果只是應用樣式input將這些樣式應用到所有的input元素如textbox，button因爲他們輸入的元素。

您應該使用id's來獨特地應用樣式。使用#button並不意味着這些樣式將應用於buttons。

你可以做的是ASIGN 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 
} 

Answer 2

您可以指定哪個輸入類型規則sho ULD變化：

輸入[類型=「文本」]

另外，如果你在你的CSS #ID使用的ID，你不需要與任何前綴他們 - 這將不利於！