输入框和按钮的宽度相同，但我不希望它

问题描述：

<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宽。怎么了？

我没有看到任何按钮或任何匹配你的提交元素在CSS中，会告诉它是100px – Kyle

@DSblizzard我希望你明白什么是错误。 – freebird

是的，我想。我将'id ='send''替换为'id =“button1”' – DSblizzard

答

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 
}

答

您可以指定哪个输入类型规则sho ULD变化：

输入[类型=“文本”]

另外，如果你在你的CSS #ID使用的ID，你不需要与任何前缀他们 - 这将不利于！

输入框和按钮的宽度相同，但我不希望它

相关推荐