代码之家 › 专栏 › 技术社区 › DSblizzard

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

css

DSblizzard · 技术社区 · 12 年前

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;
}

输入和按钮的宽度相同,为300px,但我希望按钮的宽度为100px。怎么了?

2 回复 | 直到 12 年前

Priyank Patel 12 年前

See Demo

如果你只是将风格应用于 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
}

Lee Goddard 12 年前

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

input[type='text']输入

此外,如果你在CSS#id中使用id,你不需要在它们前面加任何前缀——这没有帮助!

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

Mass · 如何在Tailwind CSS v4中创建配置

3 月前

magenta placenta · 将css变量合并为一个变量

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

4 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

4 月前

Luckkks · 过渡色工作不正常

4 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

4 月前