如何使输入字段具有100％宽度减去提交按钮的宽度？ [英] How to make an input field have 100% width minus the width of the submit button?

问题描述

我有一个非常基本的单一输入字段，旁边有一个提交按钮。搜索按钮具有104像素的固定宽度。两者都包含在浏览器视口的总宽度的50％。我的计划是允许输入字段随着浏览器窗口的放大而放大。

I have a very basic single input field with a 'submit' button alongside it. The search button has a fixed width of 104 pixels. Both are wrapped together with total width 50% of the browser viewport. It is my plan to allow the input field to enlarge as the browser window enlarges.

此时，对于我的特定浏览器窗口，我必须修改宽度输入字段从包装器的左边扩展到提交按钮的左边。但是，当我调整窗口大小时，它（显然）不会相应地调整，因此留下一个空白的空隙。

At the moment, for my specific browser window, I am having to fix the width of the input field to spread from the left of the wrapper to the left of the submit button. However, as I resize the window, it (obviously) doesn't adjust accordingly, and hence leaves a white space gap.

我没有找到这个问题的答案其他地方。我很清楚，通常宽度为100％，右边填充104px将解决这种问题与其他在线元素。但是，这里的问题是，按钮似乎不在坐垫上方，而是移动到一个新行。

I have not found an answer to this question anywhere else. I am well aware that usually a width of 100% with a right padding of 104px will solve this kind of issue with other in-line elements. HOWEVER, the issue here is that the button cannot seem to sit above the padding, and instead moves to a new line.

我如何解决这个问题？谢谢！

How may I resolve this? Thanks!

编辑：
这是我到目前为止。访问jsfiddle.net/nWCT8/
整个包装器需要居中，它需要有多数浏览器支持（虽然我不介意如果IE6不能使用它）。因为这个原因，我不认为'calc'是相当合适的。

Here's what I have so far. Visit jsfiddle.net/nWCT8/ The whole wrapper needs to be centered, and it needs to have majority browser support (although I don't mind if IE6 won't work with it). For this reason, I don't think 'calc' is quite suitable.

推荐答案

因为你有一个固定的高度，使用 absolute 位置来实现这一点（如果你不需要支持IE 6）

Because you have a fixed height, you could use absolute position to achieve this (If you don't require to support IE 6)

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

EDIT update my answer base on your jsfiddle, but I only could test it in current Chrome, Safari and FF right now.

jsfiddle

要使自动放大功能与FF正常工作，您需要使用并且输入需要具有 100％的宽度。为了防止输入元素的填充添加到 width ，需要使用以下css规则： / p>



To get auto enlarging work proper with FF you need to use a wrapper around it and the input needs to have a width of 100%. To prevent the padding of the input elements to be added to the width the following css rules needs to be use:

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

c $ c>支持：IE 8+，Chrome，Opera 7+，Safari 3+，Firefox

box-sizing is supported by: IE 8+, Chrome, Opera 7+, Safari 3+, Firefox

EDIT
样式输入元素通常有问题，因为它们填充和 margin 。
要获得没有css3 calc 功能的结果，您需要执行以下步骤：

EDIT Styling input elements is typically problematic because of their padding and margin. To have the result you want to achieve without the css3 calc feature you need to do the following steps:

1. 定义周围 .form-wrapper 的高度，并设置位置到 relative ，以便此元素负责其包含的元素的位置 absolute 。

1. Define the height to the surrounding .form-wrapper and set its position to relative so that this element is responsible for the position absolute of the elements it contains.

在输入周围包装容器（ .input-wrapper ）元素，将其位置定义为 absolute 与 left：0px ， 0px ， bottom：0px 和 right：[您的按钮宽度] 包装器总是具有宽度的按钮到右侧的距离。

Wrap a container (.input-wrapper) around the the input element, defining its position as absolute with left:0px, top:0px, bottom:0px and right:[the width of your button] that way the wrapper always has a distance of the width of the button to the right side.

设置 width 和 height 输入元素到 100％。要防止输入元素的填充添加到 width ，您需要设置框大小到边框框。

Set the width and height of the input element to 100%. To prevent the padding of the input element to be added to the width you need to set the box-sizing to border-box.

按钮到绝对与 top：0px code> bottom：0px 和 right：0 并将宽度设置为 width： ]

Set the position of the button to absolute with top:0px, bottom:0px and right:0 and setting the width to width: [width of your button]

这篇关于如何使输入字段具有100％宽度减去提交按钮的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！