CSS：如何使输入字段自动调整其宽度 [英] CSS : How to have an input field auto adjusting its width

问题描述

我有一个div叫wrapper。它使用margin属性水平居中。该包装器的宽度是固定的。在该包装器中，我有一个标签，后跟一个输入字段。我要找的是让输入字段的宽度自动调整到右侧的剩余宽度（直到包装的边界）。我想避免定义宽度的像素。我尝试了几件事，但没有什么是工作（例如宽度自动或100％）。希望明确，希望有人可以帮助。

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.

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

推荐答案

如果您将输入标签封装在另一个div中，您可以：

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

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

这篇关于CSS：如何使输入字段自动调整其宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！