Html 输入类型=文本以填充父容器

Input type=text to fill parent container

提问by Konrad Rudolph

I'm trying to let an <input type="text">(henceforth referred to as “textbox”) fill a parent container by settings its widthto 100%. This works until I give the textbox a padding. This is then added to the content width and the input field overflows. Notice that in Firefox this only happens when rendering the content as standards compliant. In quirks mode, another box model seems to apply.

我试图让<input type="text">（以下称为“文本框”）通过将其设置为width来填充父容器100%。这一直有效，直到我给文本框一个填充。然后将其添加到内容宽度并且输入字段溢出。请注意，在 Firefox 中，这仅在将内容呈现为符合标准时才会发生。在怪癖模式下，另一个盒子模型似乎适用。

Here's a minimal code to reproduce the behaviour in all modern browsers.

这是在所有现代浏览器中重现行为的最小代码。

#x {
  background: salmon;
  padding: 1em;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

My question: How do I get the textbox to fit the container?

我的问题：如何让文本框适合容器？

Notice: for the <div id="y">, this is straightforward: simply set width: auto. However, if I try to do this for the textbox, the effect is different and the textbox takes its default row count as width (even if I set display: blockfor the textbox).

注意：对于<div id="y">，这很简单：只需设置width: auto。但是，如果我尝试对文本框执行此操作，效果会有所不同，并且文本框将其默认行数作为宽度（即使我display: block为文本框设置）。

EDIT: David's solution would of course work. However, I do not want to modify the HTML –?I do especially not want to add dummy elements with no semantic functionality. This is a typical case of divitisthat I want to avoid at all cost. This can only be a last-resort hack.

编辑：大卫的解决方案当然会奏效。但是，我不想修改 HTML -？我特别不想添加没有语义功能的虚拟元素。这是一个典型的divitis 案例，我想不惜一切代价避免。这只能是最后的手段。

采纳答案by David Kolar

You can surround the textbox with a <div>and give that <div>padding: 0 20px. Your problem is that the 100% width does not include any padding or margin values; these values are added on top of the 100% width, thus the overflow.

您可以用 a 包围文本框<div>并给出<div>padding: 0 20px。您的问题是 100% 宽度不包括任何填充或边距值；这些值被添加到 100% 宽度的顶部，因此溢出。

回答by studioromeo

With CSS3 you can use the box-sizing property on your inputs to standardise their box models. Something like this would enable you to add padding and have 100% width:

使用 CSS3，您可以在输入中使用 box-sizing 属性来标准化它们的框模型。像这样的东西将使您能够添加填充并具有 100% 宽度：

input[type="text"] {
    -webkit-box-sizing: border-box; // Safari/Chrome, other WebKit
    -moz-box-sizing: border-box;    // Firefox, other Gecko
    box-sizing: border-box;         // Opera/IE 8+
}

Unfortunately this won't work for IE6/7 but the rest are fine (Compatibility List), so if you need to support these browsers your best bet would be Davids solution.

不幸的是，这对 IE6/7 不起作用，但其余的都很好（兼容性列表），因此如果您需要支持这些浏览器，最好的选择是 Davids 解决方案。

If you'd like to read more check out this brilliant article by Chris Coyier.

如果您想阅读更多内容，请查看Chris Coyier 撰写的这篇精彩文章。

Hope this helps!

希望这可以帮助！

回答by Ben

Because of the way the Box-Modellis defined and implemented I don't think there is a css-only solution to this problem. (Apart from what Matthewdescribed: using percentage for the padding as well, e.g. width: 94%; padding: 0 3%;)

由于Box-Modell的定义和实现方式，我认为这个问题没有仅 css 的解决方案。（除了Matthew描述的内容：也使用百分比作为填充，例如宽度：94%；填充：0 3%；）

You could however build some Javascript-Code to calculate the width dynmically on page-load... hm, and that value would of course also have to be updated every time the browserwindow is resized.

但是，您可以构建一些 Javascript 代码来动态计算页面加载时的宽度……嗯，当然，每次调整浏览器窗口大小时，该值也必须更新。

Interesting by-product of some testing I've done: Firefox doesset the width of an input field to 100% if additionally to width: 100%;you also set max-width to 100%. This doesn't work in Opera 9.5 or IE 7 though (haven't tested older versions).

我做过的一些测试的有趣副产品：Firefox确实将输入字段的宽度设置为 100%，如果此外width: 100%;您还将 max-width 设置为 100%。这在 Opera 9.5 或 IE 7 中不起作用（尚未测试旧版本）。

回答by Aseem Kishore

This is unfortunately not possible with pure CSS; HTML or Javascript modifications are necessary for any non-trivial flexible-but-constrained UI behavior. CSS3 columns will help in this regard somewhat, but not in scenarios like yours.

不幸的是，这在纯 CSS 中是不可能的；HTML 或 Javascript 修改对于任何重要的灵活但受约束的 UI 行为都是必要的。CSS3 列在这方面会有所帮助，但在像您这样的情况下则不然。

David's solution is the cleanest. It's not really a case of divitis -- you're not adding a bunch of divs unnecessarily, or giving them classnames like "p" and "h1". It's serving a specific purpose, and the nice thing in this case is that it's also an extensible solution -- e.g. you can then add rounded corners at any time without adding anything further. Accessibility also isn't affected, as they're empty divs.

大卫的解决方案是最干净的。这不是真正的 divitis 情况——您没有不必要地添加一堆 div，或者给它们提供诸如“p”和“h1”之类的类名。它用于特定目的，在这种情况下，好处是它也是一个可扩展的解决方案——例如，您可以随时添加圆角而无需进一步添加任何内容。可访问性也不受影响，因为它们是空的 div。

Fwiw, here's how I implement all of my textboxes:

Fwiw，这是我实现所有文本框的方法：

<div class="textbox" id="username">
    <div class="before"></div>
    <div class="during">
        <input type="text" value="" />
    </div>
    <div class="after"></div>
</div>

You're then free to use CSS to add rounded corners, add padding like in your case, etc., but you also don't have to -- you're free to hide those side divs altogether and have just a regular input textbox.

然后，您可以自由地使用 CSS 添加圆角，在您的情况下添加填充等，但您也不必 - 您可以完全隐藏那些侧面 div 并且只有一个常规输入文本框.

Other solutions are to use tables, e.g. Amazon uses tables in order to get flexible-but-constrained layout, or to use Javascript to tweak the sizes and update them on window resizes, e.g. Google Docs, Maps, etc. all do this.

其他解决方案是使用表格，例如亚马逊使用表格以获得灵活但受限的布局，或者使用 Javascript 来调整大小并在窗口调整大小时更新它们，例如谷歌文档、地图等。都这样做。

Anyway, my two cents: don't let idealism get in the way of practicality in cases like this. :) David's solution works and hardly clutters up HTML at all (and in fact, using semantic classnames like "before" and "after" is still very clean imo).

无论如何，我的两分钱：在这种情况下，不要让理想主义妨碍实用性。:) David 的解决方案有效，并且几乎不会把 HTML 弄得一团糟（事实上，使用像“before”和“after”这样的语义类名仍然是非常干净的 imo）。

回答by Andyba

How do I get the textbox to fit the container in 2019?

2019 年如何让文本框适合容器？

Just use display: flex;

只需使用 display: flex;

#x {
  background: salmon;
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
}

#y, input {
  background: red;
  padding: 0 20px;
  width: 100%;
}

<div id="x">
  <div id="y">x</div>
  <input type="text"/>
</div>

回答by Matthew M. Osborn

This behavior is caused by the different interpretations of the box model. The correct box model states that the width applies only to the content and padding and margin add on to it. So therefore your are getting 100% plus a 20px right and left padding equaling 100%+40px as the total width. The original IE box model, also known as quirks mode, includes padding and margin in the width. So the width of your content would be 100% - 40px in this case. This is why you see two different behaviors. As far as I know there is no solution for this there is however a work around by setting the width to say 98% and the padding to 1% on each side.

这种行为是由对盒模型的不同解释引起的。正确的盒子模型指出宽度仅适用于内容，填充和边距添加到内容上。因此，您将获得 100% 加上 20px 左右填充，等于 100%+40px 作为总宽度。原始的 IE 框模型，也称为 quirks 模式，包括宽度中的填充和边距。因此，在这种情况下，您的内容的宽度将为 100% - 40px。这就是为什么您会看到两种不同的行为。据我所知，没有解决方案，但是可以通过将宽度设置为 98% 并将每边的填充设置为 1% 来解决。

回答by Matthew M. Osborn

@Domenic this does not work. width auto does nothing more then the default behavior of that element because the initial value of width is auto ( see page 164, Cascading Style Sheets Level 2 Revision 1 Specification). Assigning a display of type block does not work either, this simply tell the browser to use a block box when displaying the element and does not assign a default behavior of taking as much space as possible like a div does ( see page 121, Cascading Style Sheets Level 2 Revision 1 Specification). That behavior is handled by the visual user agent not CSS or HTML definition.

@Domenic 这不起作用。width auto 除了该元素的默认行为之外什么都不做，因为 width 的初始值是 auto （请参阅第 164 页，层叠样式表级别 2 修订版 1 规范）。分配块类型的显示也不起作用，这只是告诉浏览器在显示元素时使用块框，并且不会像 div 那样分配尽可能多的空间的默认行为（请参阅第 121 页，层叠样式Sheets Level 2 Revision 1 Specification）。该行为由可视化用户代理处理，而不是 CSS 或 HTML 定义。

回答by Darren Kopp

i believe you can counter the overflow with a negative margin. ie

我相信你可以用负边距来抵消溢出。IE

margin: -1em;

回答by Keith Walton

The default padding and border will prevent your textbox from truly being 100%, so first you have to set them to 0:

默认的填充和边框会阻止你的文本框真正成为 100%，所以首先你必须将它们设置为 0：

input {
    background: red;
    padding: 0;
    width: 100%;
    border: 0; //use 0 instead of "none" for ie7 
}

Then, put your border and any padding or margin you want in a div around the textbox:

然后，将您的边框和您想要的任何填充或边距放在文本框周围的 div 中：

.text-box {
    padding: 0 20px;
    border: solid 1px #000000;
}

<body>
    <div id="x">
        <div id="y">x</div>
        <div class="text-box"><input type="text"/></div>
    </div>
</body>

This should allow your textbox to be expandable and the exact size you want without javascript.

这应该允许您的文本框可扩展和您想要的确切大小，而无需 javascript。