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

【问题标题】：CSS : How to have an input field auto adjusting its widthCSS：如何让输入字段自动调整其宽度
【发布时间】：2015-09-29 00:16:36
【问题描述】：

我有一个名为 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;
}

【问题讨论】：

抱歉在这里查看jsfiddle.net/72sPT/2
我的想法是我希望宽度自动占据右侧的整个剩余空间。如果我把 100% 放在你的解决方案中，就会有一个换行符，并且输入字段放在下一行......
在 html 文档上尝试一下，我认为由于 jsfiddle 中的空间有限，会发生换行。
在这里查看我关于 flex 和 flex-grow 的回答：stackoverflow.com/a/52975265/1599699

标签： css

【解决方案1】：

如果你将输入标签包裹在另一个div中，你可以这样做：

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

【讨论】：

你好，肯尼斯。谢谢你。你的提议是有效的。奇怪的是，当将宽度设置为 100% 时，会出现溢出。输入的右边框被隐藏。为避免这种情况，我必须将其设置为 99%。但这对我来说很好。再次感谢:)
@Marc，这是因为使用了盒子模型/尺寸（其中宽度不包括填充和边框）。您可以设置box-sizing: border-box 以包含这些内容，并在width: 100% 时获得合适的输入。

【解决方案2】：

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

jsFiddle

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

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

【讨论】：

你好乔弗里。感谢 tryig 再次提供帮助，正如我所说，我正在寻找输入字段以适应总剩余空间。不只是其中的一部分……无论如何，谢谢