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

Question

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

小提琴：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;
}

​</p>

Answer 1

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

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

Answer 2

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

jsFiddle

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

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