首页 / 知识

关于CSS：文本框填充父容器

2023-04-14 17:42:00

Textbox to fill parent container

我试图通过将其width设置为100%来让(此后称为"文本框")填充父容器。在我给文本框添加填充之前，此方法一直有效。然后将其添加到内容宽度，并且输入字段溢出。请注意，在Firefox中，仅当将内容呈现为符合标准时才会发生。在怪癖模式下，似乎可以应用另一个盒子模型。

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

1
2
3
4
5
6
7
8
9
10

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

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

1 2	x <input type="text"/>

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

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

编辑：大卫的解决方案当然会工作。但是，我不想修改HTML –我尤其不想添加没有语义功能的伪元素。我想不惜一切代价避免这是典型的神经炎。这只能是最后的手段。

使用CSS3，您可以在输入中使用box-sizing属性来标准化其box模型。
这样的事情将使您能够添加填充并具有100％的宽度：

1
2
3
4
5

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+
}

不幸的是，这不适用于IE6 / 7，但其余的都很好(兼容性列表)，因此，如果您需要支持这些浏览器，那么最好的选择就是Davids解决方案。

如果您想了解更多信息，请查看Chris Coyier撰写的精彩文章。

希望这可以帮助！

您可以用包围文本框，并将其赋予 padding: 0 20px。您的问题是100％的宽度不包含任何填充或边距值。这些值被添加到100％宽度的顶部，从而溢出。

由于Box-Modell的定义和实现方式，我认为没有针对此问题的纯CSS解决方案。 (除了Matthew描述的内容外：也将百分比用于填充，例如宽度：94％；填充：0 3％；)

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

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

不幸的是，这对于纯CSS是不可能的。 HTML或Javascript修改对于任何非平凡但受约束的UI行为都是必需的。 CSS3列在这方面会有所帮助，但在像您这样的场景中则无济于事。

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

首先，这是我实现所有文本框的方式：

1	<input type="text" value="" />

然后，您可以自由使用CSS添加圆角，添加填充(如您的情况)等，但是您也不必-您可以自由地将这些侧div全部隐藏起来，而只有一个常规输入文本框。

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

无论如何，我的两分钱：在这种情况下，不要让理想主义妨碍实用性。 :) David的解决方案有效且几乎不会弄乱HTML(实际上，使用语义类名(如" before"和" after"仍然很干净))。

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

只需使用display：flex;

1
2
3
4
5
6
7
8
9
10
11
12

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

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

1 2	x <input type="text"/>

@Domenic这不起作用。 width auto只会执行该元素的默认行为，因为width的初始值为auto(请参见第164页，级联样式表2级修订1规范)。分配类型块的显示也不起作用，这只是告诉浏览器在显示元素时使用块框，并且没有分配默认行为，即像div那样占用尽可能多的空间(请参见第121页，级联样式表2级修订1规范)。该行为是由视觉用户代理而非CSS或HTML定义处理的。

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

默认的填充和边框将阻止您的文本框真正变为100％，因此首先必须将它们设置为0：

1
2
3
4
5
6