CSS:如何让输入字段自动调整其宽度

Question

我有一个叫做包装器的div.它使用margin属性水平居中.该包装器的宽度是固定的.在包装器的内部,我有一个标签后跟一个输入字段.我要找的是让输入字段的宽度自动调整到右边的剩余宽度(直到包装器的边框).我想避免以像素为单位定义宽度.我尝试了一些东西,但没有任何工作(宽度自动或100%例如).希望明确并希望有人可以提供帮助.

FIDDLE:http://jsfiddle.net/72sPT/

HTML:

<div id="wrapper">
   <a>this is a button</a>
   <input type="text"/>
</div>?

CSS:

#wrapper {
    width: 600px;
    margin: 10px auto;
    background: blue;
}

​

Answer 1

如果将输入标记包装在另一个div中,则可以执行以下操作:

#wrapper {
    width: 600px;
    margin: 10px auto;
    background: blue;
}
#wrapper a {
    float: left;
}
#wrapper div {
    overflow: hidden;
}
#wrapper input {
    width: 100%;
}