CSS：带右浮动按钮的流畅文本输入 [英] CSS: fluid text input with floated-right button

问题描述

我想用右侧的提交按钮创建一个流畅的文本输入。输入和按钮应该填充其容器的100％。

I'm trying to create a fluid text input with a submit button to its right. The input and the button should fill 100% of its container.

这是一个我想实现的近似：http://jsfiddle.net/t7tgJ/

Here is an approximation of what I'm trying to achieve: http://jsfiddle.net/t7tgJ/

我遇到的问题是，为了有输入填充它的容器我需要给它一个流体宽度，像100％。但是，如果我向右浮动按钮，我需要把这个宽度减少到90％，以便按钮可以适应。但这只适用于一个视口大小。

The problem I'm running into to is, in order to have the input fill its container I need to give it a fluid width, like 100%. However if I float the button right, I'll need to bump down that width to something like 90% so that the button can fit. But this only works for one viewport size.

我想要的是像

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

或者，在纯英语中，我的输入应该延伸到右边浮动的按钮，

or, in plain english, my input should extend up to the right-floated button and remain that way at any viewport size.

推荐答案

虽然他们都表达了很好的想法，但我无法获得各种建议浏览器。在迭代这一堆之后，我想出了以下解决方案，看起来好的一切> IE7，不需要任何额外的容器。

Although they all expressed good ideas, I was having trouble getting the various suggestions to look consistant across browsers. After iterating on this a bunch I came up with the following solution which looks good for everything > IE7 and doesn't require any additional containers.

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

基本上我的解决方案是：

Basically the solution for me was:

1） button {float：right;位置：相对; top：-28px; }

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

2) Use browser resets to cancel some of the extra padding and margins that get added to the button element.

3）设置输入和按钮的高度，以进一步保持浏览器之间的一致大小。

3) Set the height of the input and button to further maintain consistant sizes between browsers.

这篇关于CSS：带右浮动按钮的流畅文本输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！