我可以阻止100％宽度的文本框超出其容器范围吗？

181

可以说我有一个文本框，我想填写整行。我会给它这样的样式：

input.wide {display:block; width: 100%}

这会导致问题，因为宽度是基于文本框的内容的。文本框默认情况下具有边距，边框和填充，这会使宽度为100％的文本框大于其容器。

例如，在右侧：

在此处输入图片说明

有什么方法可以使文本框填充其容器的宽度而不会扩展超出它？

这是一些示例HTML来显示我的意思：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <style type="text/css">
        #outer{border: 1px solid #000; width: 320px; margin: 0px;padding:0px}
        #inner{margin: 20px; padding: 20px; background: #999;border: 1px solid #000;}
        input.wide {display:block; margin: 0px}
        input.normal {display:block; float: right}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">
            <input type="text" class="wide" />
            <input type="text" class="normal" />
            <div style="clear:both;"></div>
        </div>
    </div>
</body>
</html>

如果运行此命令，则可以通过查看“常规”文本框来看到“宽”文本框突出于容器之外。“普通”文本框浮动到容器的实际边缘。我试图使“宽”文本框填充其容器，而不会像“常规”文本框那样扩展到边缘之外。

html css

— 丹·赫伯特
source

87

您可以做的是在上删除默认的“ extras” input：

input.wide {display:block; width:100%;padding:0;border-width:0}

这样会将其保留input在其容器中。现在，如果你想的边界，包裹input在一个div与所设定的边界div（这样你可以删除display:block从input太）。就像是：

<div style="border:1px solid gray;">
 <input type="text" class="wide" />
</div>

编辑： 另一个选择是，而不是从中删除样式input，在包装好的内容中对其进行补偿div：

input.wide {width:100%;}

<div style="padding-right:4px;padding-left:1px;margin-right:2px">
  <input type="text" class="wide" />
</div>

这将在不同的浏览器中给您带来一些不同的结果，但它们不会与容器重叠。div中的值取决于边框的尺寸以及边框和边框input之间要保留的空间input。

— 希尔布德·布坎普（Hilbrand Bouwkamp）
source

3

这是一个非常有创意的解决方案。我唯一遇到的问题是，除非它使用JavaScript更改包装div的边框，否则无法在文本框获得焦点时在其上定义轮廓。

— 丹·赫伯特2009年

@DanHerbert，您是对的，这是此方法的主要UX缺陷

— Baumr 2013年

275

有什么方法可以使文本框填充其容器的宽度而不会扩展超出它？

是的：通过使用CSS3属性'box-sizing：border-box'，您可以重新定义“宽度”是指包括外部填充和边框的含义。

不幸的是，由于它是CSS3，所以支持还不是很成熟，并且由于规范过程尚未完成，因此在浏览器中它具有不同的临时名称。所以：

input.wide {
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

老式的替代方法是简单地在封闭的<div>或<td>元素上放置一定数量的“ padding-right”，等于您认为浏览器将在“ px”中增加多少左右填充/边框提供输入。（对于IE <8，通常为6px。）

— 博宾斯
source

这将很好用，除非不能使用它，因为我的目标是可能多年未支持此功能的移动设备。：-\

— Dan Herbert，2009年

20

我认为移动设备将比计算机更全面地支持HTML5。

— 马里亚诺·卡瓦洛

4

@Kindred：如果您同时包括IEMobile和Blackberry，则绝对不会。

— bobince 2010年

1

不过，这对桌面浏览器有很好的支持：quirksmode.org/css/contents.html

— logan

2

我怎么这么久才找到这种很棒的黄油酱？？？我们可以将其设为可接受的答案吗？

— streetlogics 2013年

14

这为我解决了问题！

无需外部div。只需将其应用于给定的文本框即可。

box-sizing: border-box;

使用此属性，“ width和height属性（以及min / max属性）包括内容，填充和边框，但不包括边距”

请参阅w3schools中的财产描述。

希望这对某人有帮助！

— 杰克·特罗布里奇
source

非常简单！谢谢！

— nurider '16

10

我自己只是遇到了这个问题，而我能在所有测试浏览器（IE6，IE7，Firefox）中找到的唯一解决方案是：

将输入字段包装在两个单独的DIV中
将外部DIV设置为100％的宽度，这样可以防止我们的容器溢出文档
在内部DIV中添加准确量的填充，以补偿输入的水平溢出。
在输入上设置自定义填充，使其溢出量与内部DIV中允许的填充量相同

代码：

<div style="width: 100%">
    <div style="padding-right: 6px;">
        <input type="text" style="width: 100%; padding: 2px; margin: 0;
                                  border : solid 1px #999" />
    </div>
</div>

在这里，输入元素的总水平溢出为6px-2x（填充+边框）-因此我们为内部DIV设置了6px的右填充。

— 托比亚斯·科恩（Tobias Cohen）
source

在输入元素中添加8px填充，它将不再起作用

— JuHwon15年

7

实际上，box-sizing支持非常好：http : //caniuse.com/#search=box-sizing

因此，除非您以IE7为目标，否则您应该能够使用此属性解决此类问题。诸如sass或更少的图层使处理诸如btw之类的前缀规则变得更加容易。

— 千道
source

3

实际上，这是因为CSS相对于容器的整个宽度（包括其边距，边框和填充）定义了100％；这意味着空间可用。除非容器没有边距，边框或填充，否则其含量小于100％。

这是违反直觉的，许多人普遍认为这是我们现在所坚持的错误。实际上，这意味着％尺寸仅适用于顶级容器，即使在没有边距，边框或填充的情况下，也对顶层容器没有任何好处。

请注意，文本字段的边距，边框和内边距都包含在为其指定的CSS大小中-容器是用来扔掉东西的。

我可以通过使用98％来解决该问题，但这并不是一个完美的解决方案，因为随着容器变大，输入字段往往会变得越来越短。

编辑：我遇到了类似的问题 -我从未尝试过给出的答案，而且我不确定它是否适用于您的问题，但似乎会。

— 劳伦斯·多尔
source

1

一种可行的解决方案（对我有用）是在输入（文本框）上应用负边距 ...或为ie7设置固定宽度，或放弃ie7支持。这导致像素完美宽度。.对我来说，它是7，所以我加了3和4，但它仍然是像素完美。

我有同样的问题，我讨厌为边框等设置额外的div！

所以这是我的解决方案，似乎可行！

您应该使用仅ie7样式表来避免starhacks。

input.text{
    background-color: #fbfbfb;
    border : solid #eee 1px;
    width: 100%;
    -box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 32px;

    *line-height:32px;
    *margin-left:-3px;
    *margin-right:-4px;
    display: inline;   
    padding: 0px 0 0 5px;

}

— 大猩猩猿
source

1

如果您不能使用box-sizing:border-box，可以尝试删除元素并在元素中width:100%放置一个非常大的size属性，<input>但是缺点是您必须修改html，而不能仅使用CSS来做到这一点：

<input size="1000"></input>

— 西达杰夫
source

0

如果您不需要动态执行此操作（例如，窗体的宽度固定），则可以将子<input>元素的宽度设置为其容器的宽度减去任何装饰（例如填充，边距，边框等）的宽度：

 // the parent div here has a width of 200px:
.form-signin input[type="text"], .form-signin input[type="password"], .form-signin input[type="email"], .form-signin input[type="number"] {
  font-size: 16px;
  height: auto;
  display: block;
  width: 280px;
  margin-bottom: 15px;
  padding: 7px 9px;
}

— Avishai
source

0

如果不能使用框大小调整（例如，当您使用iText将HTML转换为PDF时）。试试这个：

的CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; } 
.input-wrapper input[type=text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

的HTML

<div class="input-wrapper">
     <input type="text" value="" name="city"/>
</div>

— 罗伯塔德
source

0

这有效：

<div>
    <input type="text" 
        style="margin: 5px; padding: 4px; border: 1px solid; 
        width: 200px; width: calc(100% - 20px);">
</div>

第一个“宽度”是旧版浏览器的后备规则。

— Mo'in Creemers
source

0

只需设置输入样式即可抵消额外的填充。在以下示例中，输入的填充左右将为10px，总填充偏移为20px：

input[type=text]{
   width: calc(100% - 20px);
}

— 昆洛
source