比包含 Div 宽的 HTML 输入元素

我有一个包含在 div 中的 html 元素。高度由外部 div 指定，输入控件的高度和宽度为100% 。在最基本的层面上，我遇到了一个问题，文本框超过了包含 div 的右边。

基本示例代码:

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

这个控件的呈现要比这个复杂得多，但是当控件被剥离到这个级别时，我遇到了一个问题，文本框突出到包含 div 的区域。

63435 次浏览
小开

不要直接在 input 元素上应用样式，可以将 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 中？我不会感到惊讶，如果只是一个更好的布局，你可以建立，将避免这样做的需要..。

小开

我假设您希望所包含的元素(<input>)小于或完全包含在 <div>中？

你可以选择:

input {width: 50%; /* or whatever */ }

Html 元素的宽度(我认为)计算为已定义的宽度 + 边框 + 边距 + 填充

如果您已经将输入定义为具有父类的100% 宽度，然后添加其他属性，那么它肯定会溢出父类 div。

可以将边距/填充/边框设置为0，但这样看起来可能不太好。因此，它是 更容易，虽然不一定完美，只是使用一个适当的-更小的宽度。

你当然可以用

#parent_div {overflow: hidden; /* or 'auto' or whatever */}

隐藏通常会溢出容器 div 的输入元素部分。

小开

遗憾的是，这将取决于您正在使用的浏览器，但是设置对象的宽度(文本框)没有考虑到对象边框的宽度。大多数浏览器只考虑外部对象的任何填充和所包含对象的边距，但有一些(我正在看你的 IE)在计算百分比时没有添加边界;

最好的办法是改变文本框的边框，或者在文本框和容器之间加入另一个 div，填充大小为2px，并且使用 margin-top: -2px和 margin-left:-2px(我猜是边框宽度)

小开

我知道这个帖子很老了，但是这是一个普遍的问题，没有人发布任何好的回答..。

下面的 HTML 代码看起来不错。但是当我添加 doctype 时，问题出现了

div.field_container
{
height: 25px;
width: 150px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>

为了解决宽度/高度问题，可以向 field _ Container 添加填充，但这会使容器变大。

div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
padding-right: 4px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<input type="text" name="" value="" />
</div>

如果不能更改容器宽度，也可以使用以下技巧，但这仍然会增加高度

div.field_container
{
height: 25px;
width: 150px;
padding-bottom: 6px;
border: 1px solid red;
}
div.field_container input
{
height: 100%;
width: 100%;
}
<div class="field_container">
<div style="height: 100%; margin-right:4px"><input type="text" name="" value="" /></div>
</div>
小开

你可以使用 box-size: orders-box 来解决这个问题:

input{box-sizing:border-box}

这意味着输入框上的边框实际上位于输入的宽度之内，而不是被添加到外部。这就是使输入大于容器的原因。

Paul Irish 有一篇很好的文章解释了这种技术 http://paulirish.com/2012/box-sizing-border-box-ftw

他关于填充的观点也适用于边界。

甚至还有一个指南针混合，使其更容易支持较老的浏览器

小开

这就是我的工作:

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

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

小开

请将下面的 css 应用到您的输入元素。

{
box-sizing: border-box;
width: 100%;
}

如果您使用引导程序或其他 CSS 库，这将是没有问题的。


提交答案