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

我有一个叫wrapper的div。它使用边距属性水平居中。该包装的宽度是固定的，在该包装中，我有一个a标记，后跟一个输入字段。我想要的是让输入字段的宽度自动调整到右边的剩余宽度（直到包装器的边界）。我希望避免以像素为单位定义宽度。我尝试了一些东西，但没有任何效果（例如自动宽度或100%）。希望清楚，希望有人能帮忙

小提琴：

HTML:

---

​

如果将输入标记包装到另一个div中，则可以执行以下操作：

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

---

如果您希望不弄乱您的

对不起，请检查这里的想法是，我希望宽度自动采取整个剩余的空间在右侧。在你的解决方案中，如果我100%放一个换行符，输入字段放在下一行……在html文档上尝试一下，我认为换行符的出现是因为JSFIDLE中的空间有限。请参阅我关于flex和flex grow的回答：你好，Kenneth。非常感谢。你的建议行得通。奇怪的是，当将宽度设置为100%时，会出现溢出。输入的右边框是隐藏的。为了避免这种情况，我必须将其设置为99%。但我没意见。再次感谢：）@Marc，这是因为使用的盒子型号/尺寸（宽度不包括填充和边框）。您可以设置
框大小：边框框
以包括这些，并在
宽度：100%
时获得配件输入。您好，jofry。感谢您的帮助，但正如我所说，我一直在寻找输入字段，以适应总剩余空间。不仅仅是它的一部分。。。无论如何谢谢你
#wrapper {
    width: 600px;
    margin: 10px auto;
    background: blue;
}

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

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

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