html对文本框扩大范围,关于html：我可以阻止100％宽度文本框扩展到容器之外吗？...

元素上放置一些&＃39;padding-right&＃39;等于你认为浏览器会给出输入的&＃39;px&＃39;中多少额外的左右填充/边框。 (对于IE <8&＃xff0c;通常为6px。)

这样做会很好&＃xff0c;除非不能使用它&＃xff0c;因为我的目标是多年来可能不支持这种情况的移动设备。 &＃xff1a; -

我认为移动设备将在计算机之前提供完整的HTML5支持。

&＃64;Kindred&＃xff1a;如果你在其中包含IEMobile和Blackberry&＃xff0c;那绝对不是。

但是&＃xff0c;这对桌面浏览器有很大的支持&＃xff1a;quirksmode.org/css/contents.html

很棒&＃xff0c;但是如果浏览器不支持CSS3&＃xff0c;你如何做出后退选项呢&＃xff1f;

支持的浏览器&＃xff1a;caniuse.com/css3-boxsizing

您还可以添加一个文本缩进&＃xff0c;它可以在左侧填充。但这对于右侧或textareas的填充不起作用。

实际上你可以看到几乎所有东西都支持它... caniuse.com/#search&＃61;box-sizing

谢谢&＃xff0c;这对响应式布局有很大帮助。

&＃43;1实际上保存了我头发的剩余部分&＃xff01;

我怎么花这么长时间才找到这个很棒的奶油酱???请问我们能接受这个答案吗&＃xff1f;

border-box现在是正确的解决方案。这应该是公认的答案。

非常感谢你做的这些

你可以做的是删除input上的默认"额外"&＃xff1a;

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

这将使input保持在其容器内。

现在&＃xff0c;如果你想要边框&＃xff0c;将input包装在div中&＃xff0c;边框设置在div上(这样你也可以从input中删除display:block)。就像是&＃xff1a;

编辑&＃xff1a;

另一种选择是&＃xff0c;不是从input中删除样式&＃xff0c;而是在包装的div中对其进行补偿&＃xff1a;

input.wide {width:100%;}

这会在不同的浏览器中给你一些不同的结果&＃xff0c;但它们不会与容器重叠。 div中的值取决于input上边框的大小以及input和边框之间所需的空间大小。

这是一个非常有创意的解决方案我唯一的问题是&＃xff0c;除非我使用Javascript来更改包装div的边框&＃xff0c;否则我无法在文本框中定义轮廓。

&＃64;DanHerbert&＃xff0c;你是对的&＃xff0c;这是这种方法的主要用户体验漏洞

这解决了我的问题&＃xff01;

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

box-sizing: border-box;

使用此属性"宽度和高度属性(和最小/最大属性)包括内容&＃xff0c;填充和边框&＃xff0c;但不包括边距"

请参阅w3schools的财产说明。

希望这有助于某人&＃xff01;

非常简单&＃xff01;谢谢&＃xff01;

刚刚遇到这个问题&＃xff0c;我能找到的唯一解决方案在我的所有测试浏览器(IE6&＃xff0c;IE7&＃xff0c;Firefox)中都有以下几点&＃xff1a;

将输入字段包装在两个单独的DIV中

将外部DIV设置为宽度100&＃xff05;&＃xff0c;这可以防止我们的容器溢出文档

将填充放在精确量的内部DIV中以补偿输入的水平溢出。

在输入上设置自定义填充&＃xff0c;使其溢出的内容与内部DIV中允许的量相同

代码&＃xff1a;

这里&＃xff0c;输入元素的总水平溢出是6px - 2x(填充&＃43;边框) - 所以我们为内部DIV设置了一个填充右边6px。

完全适合我。我还没有在IE中完成测试。

好的解决方案&＃xff0c;谢谢&＃xff01;

添加到输入元素8px填充&＃xff0c;它不再工作

实际上&＃xff0c;box-sizing支持非常好&＃xff1a;http&＃xff1a;//caniuse.com/#search&＃61;box-sizing

因此&＃xff0c;除非您针对IE7&＃xff0c;否则您应该能够使用此属性解决此类问题。像sass或更少的层使得更容易处理像这样的前缀规则&＃xff0c;顺便说一句。

实际上&＃xff0c;这是因为CSS相对于容器的整个宽度定义了100&＃xff05;&＃xff0c;包括其边距&＃xff0c;边框和填充;这意味着空间有用。除非容器没有边距&＃xff0c;边框或填充&＃xff0c;否则其内容的数量小于100&＃xff05;。

这是违反直觉的&＃xff0c;并且被许多人广泛认为是我们现在所困扰的错误。它实际上意味着&＃xff05;维度对于除顶级容器之外的任何东西都没有好处&＃xff0c;即便如此&＃xff0c;只有它没有边距&＃xff0c;边框或填充。

请注意&＃xff0c;文本字段的边距&＃xff0c;边框和填充都包含在为其指定的CSS大小中 - 它是容器的内容。

我通过使用98&＃xff05;可以容忍地解决它&＃xff0c;但这不是一个完美的解决方案&＃xff0c;因为随着容器变大&＃xff0c;输入字段往往会进一步缩短。

编辑&＃xff1a;我遇到了这个类似的问题 - 我从来没有尝试过给出的答案&＃xff0c;我不确定它是否适用于您的问题&＃xff0c;但似乎它会。

如果您不能使用box-sizing:border-box&＃xff0c;您可以尝试删除width:100%并在元素中放置一个非常大的size属性&＃xff0c;但是缺点是您必须修改html&＃xff0c;并且无法使用仅限CSS&＃xff1a;

一个可行的解决方案(它适用于我)是在输入(文本框)...或固定宽度为ie7或降低ie7支持时应用负边距。

这导致像素完美的宽度..对我来说它是7所以我添加3和4但它仍然像素完美..

我有同样的问题&＃xff0c;我讨厌为边境等额外的div&＃xff01;

所以这是我的解决方案似乎工作&＃xff01;

你应该使用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;

}

只需将输入设置为偏移量即可进行额外填充。在下面的示例中&＃xff0c;输入上的填充将在左侧和右侧为10px&＃xff0c;总填充偏移量为20px&＃xff1a;

input[type&＃61;text]{

width: calc(100% - 20px);

}

这有效&＃xff1a;

style&＃61;"margin: 5px; padding: 4px; border: 1px solid;

width: 200px; width: calc(100% - 20px);">

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

如果您不能使用box-sizing(例如&＃xff0c;当您使用iText将HTML转换为PDF时)。试试这个&＃xff1a;

CSS

.input-wrapper { border: 1px solid #ccc; padding: 0 5px; min-height: 20px; }

.input-wrapper input[type&＃61;text] { border: none; height: 20px; width: 100%; padding: 0; margin: 0; }

HTML

如果您不需要动态地执行它(例如&＃xff0c;您的表单具有固定宽度)&＃xff0c;您可以将子元素的宽度设置为其容器的宽度减去任何装饰&＃xff0c;如填充&＃xff0c;边距&＃xff0c;边框&＃xff0c;等等。&＃xff1a;

// the parent div here has a width of 200px:

.form-signin input[type&＃61;"text"], .form-signin input[type&＃61;"password"], .form-signin input[type&＃61;"email"], .form-signin input[type&＃61;"number"] {

font-size: 16px;

height: auto;

display: block;

width: 280px;

margin-bottom: 15px;

padding: 7px 9px;

}

Copyright ©  码农家园