CSS:具有浮动右键的流体文本输入

Question

我正在尝试使用右侧的提交按钮创建流畅的文本输入.输入和按钮应填充其容器的100%.

这是我正在努力实现的近似:http://jsfiddle.net/t7tgJ/

我遇到的问题是,为了让输入填充其容器,我需要给它一个流体宽度,如100%.但是,如果我向右浮动按钮,我需要将宽度减小到90%,以便按钮可以适合.但这仅适用于一个视口大小.

我想要的是类似的东西

input { width: 100% - {button.width}; }
button { float: right; }

或者,用简单的英语,我的输入应该扩展到右浮动按钮,并保持在任何视口大小.

Answer 1

我认为您的问题有两种解决方案。

1) 您可以 display: flex在容器元素和 flex-grow: 1输入上使用。这是一个代码笔

2）你可以使用这篇文章中的overflow: hidden技巧。尽管您必须在您的领域使用额外的包装器。input

Answer 2

尽管他们都表达了很好的想法，但我很难让各种建议在浏览器之间看起来保持一致。经过多次迭代后，我想出了以下解决方案，它看起来适合所有> IE7，并且不需要任何额外的容器。

http://jsfiddle.net/tjlahr/hUeZS/

基本上我的解决方案是：

1）button { float: right; position: relative; top: -28px; }

2）使用浏览器重置来取消添加到按钮元素的一些额外填充和边距。

3) 设置输入框和按钮的高度，以进一步保持浏览器之间尺寸的一致性。