css - 如何使输入字段的宽度减去提交按钮的宽度为 100%？

Question

我有一个非常基本的单一输入字段，旁边有一个“提交”按钮。搜索按钮的宽度固定为 104 像素。两者都被包裹在一起，总宽度占浏览器视口(viewport)的 50%。我的计划是允许输入字段随着浏览器窗口的扩大而扩大。

目前，对于我的特定浏览器窗口，我必须将输入字段的宽度固定为从包装器的左侧扩展到提交按钮的左侧。然而，当我调整窗口大小时，它(显然)没有相应地调整，因此留下了空白间隙。

我还没有在其他地方找到这个问题的答案。我很清楚，通常 100% 的宽度和 104px 的右填充将解决其他内联元素的此类问题。但是，这里的问题是按钮似乎不能位于填充上方，而是移动到新行。

我该如何解决这个问题？谢谢!

编辑:这是我到目前为止所拥有的。访问 jsfiddle.net/nWCT8/整个包装器需要居中，并且需要大多数浏览器支持(尽管我不介意 IE6 是否无法使用它)。因此，我认为“calc”不太合适。

Answer 1

因为你有一个固定的高度，你可以使用absolute position来实现这个(如果你不需要支持IE 6)

编辑 根据您的 jsfiddle 更新我的答案，但我现在只能在当前的 Chrome、Safari 和 FF 中测试它。

jsfiddle

要使 FF 自动放大正常工作，您需要在其周围使用包装器，并且 input 的宽度需要为 100%。为了防止将 input 元素的填充添加到 width 中，需要使用以下 css 规则:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

box-sizing 支持:IE 8+、Chrome、Opera 7+、Safari 3+、Firefox

编辑样式化 input 元素通常是有问题的，因为它们的 padding 和 margin。要在没有 css3 calc 功能的情况下获得您想要的结果，您需要执行以下步骤:

1. 为周围的.form-wrapper定义高度，并将其position设置为relative，这样该元素负责它包含的元素的位置 absolute。

2. 在 input 元素周围包装一个容器 (.input-wrapper)，用 将其位置定义为 absolute >left:0px, top:0px, bottom:0px and right:[the width of your button] 这样wrapper 始终与右侧的 width of the button 的距离。

3. 将 input 元素的 width 和 height 设置为 100%。要防止将 input 元素的填充添加到 width，您需要将 box-sizing 设置为 border-box .

4. 将 button 的位置设置为 absolute with top:0px, bottom:0px和 right:0 并将宽度设置为 width: [width of your button]