我正在尝试创建一个在其右侧带有提交按钮的流畅文本输入。输入和按钮应填充其容器的 100%。
这是我要实现的目标的近似值:http://jsfiddle.net/t7tgJ/
我遇到的问题是，为了让输入填满它的容器，我需要给它一个流动的宽度，比如 100%。但是，如果我向右浮动按钮，我需要将该宽度降低到 90% 左右，以便按钮适合。但这仅适用于一种视口(viewport)尺寸。
我想要的是类似的东西
input { width: 100% - {button.width}; }
button { float: right; }
或者，用简单的英语来说，我的输入应该延伸到右浮动按钮，并在任何视口(viewport)大小下保持这种状态。
最佳答案
我认为您的问题有 2 个解决方案。
1) 您可以在容器元素上使用 display: flex 并在输入上使用 flex-grow: 1。 Here is a codepen
2) 您可以使用来自this post 的overflow: hidden 技巧.尽管您必须在 input 字段上使用额外的包装器。
关于CSS:带有右浮动按钮的流畅文本输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10126031/