HTML输入元素比包含Div更宽

Question

我有一个包含在div中的html元素.高度由外部div决定,输入控件的高度和宽度为100%.在最基本的层面上,我遇到的问题是文本框超出了包含div的权限.

基本示例代码:

<div style="height:25px; width: 150px;">
     <input type="text" style="height:100%; width:100%"  />
</div>

这个控件的渲染比这复杂得多,但是当控制被剥离到这个级别时,我还有一个问题,即文本框突出了包含div.

Answer 1

您可以使用box-sizing:border-box来处理这个问题.只需将以下内容放入您的css文件中:

input{box-sizing:border-box} 

这意味着输入框上的边框实际上在输入的宽度内,而不是添加到外部.这就是使输入大于容器的原因.

保罗爱尔兰有很好的解释这种技术的帖子http://paulirish.com/2012/box-sizing-border-box-ftw

关于填充的要点也适用于边界.

甚至还有一个指南针混合,以便更容易支持旧浏览器.(http://compass-style.org/reference/compass/css3/box_sizing/)

Answer 2

尝试提供输入 width : 100%; box-sizing: border-box;

Answer 3

这使我的工作:

input {
  padding: 0.2em; 
  box-sizing: border-box;
  width: 100% 
} 

Answer 4

可以将 CSS 抽象到文件中并使用类，而不是直接在输入元素上应用样式：

div.field_container
{
  height: 25px;
  width: 150px;
}

div.field_container input
{
  height: 100%;
  width: 100%;
} 

<div class="field_container">
  <input type="text" name="" value="" />
</div>

在测试这是否有帮助之前，我已经跑出了门，但至少，您可以在 DIV css 上使用最大高度/宽度设置，以使其在我的解决方案不起作用时不会中断。像这样抽象 CSS 使得使用 Firefox 中的 Firebug 这样的插件更容易解决问题。

但问题是，是否需要将输入标签包含在它自己的 DIV 中？如果您可以构建更好的布局来避免这样做，我不会感到惊讶......