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

CSS : How to have an input field auto adjusting its width

提问by Marc

I have a div called wrapper. It is centered horizontally using the margin property. The width of that wrapper is fixed.Inside that wrapper I have an a tag followed by an input field. What I am looking for is to have the width of the input field auto adjusting to the remaining width on the right (until the border of wrapper). I would like to avoid defining the width in pixels. I tried few thing but nothing is working (width auto or 100% for instance). Hope to be clear and hope someone can help.

我有一个名为包装器的 div。它使用 margin 属性水平居中。该包装器的宽度是固定的。在该包装器内，我有一个标签，后跟一个输入字段。我正在寻找的是让输入字段的宽度自动调整到右侧的剩余宽度（直到包装器的边框）。我想避免以像素为单位定义宽度。我尝试了几件事，但没有任何效果（例如宽度自动或 100%）。希望说清楚，希望有人能帮忙。

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

小提琴：http: //jsfiddle.net/72sPT/

HTML:

HTML：

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

CSS:

CSS：

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

?

?

回答by Kenneth Cheng

If you wrap the input tag in another div, you can do:

如果将 input 标签包装在另一个 div 中，则可以执行以下操作：

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

回答by JofryHS

If you are looking to not mess with your <a>tag, then you can float your input to the right:

如果您不想弄乱您的<a>标签，那么您可以将输入浮动到右侧：

jsFiddle

js小提琴

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

#wrapper input {
 float:right;
width:70%;    
}