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

Answer 2

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

jsFiddle

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

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

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

2 个答案: