HTML输入元素宽于Containing Div [英] HTML input element wider than Containing Div

问题描述

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

I have an html element that is contained within a div. Height are dictated by the outer div and the height and width of the input control are 100%. At the most basic level, I am having an issue where the textbox extends past the right of the containing div.

基本示例代码：

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

这个控件的渲染比这个复杂得多，但是当控件被剥离这个级别，我有一个问题，其中textbox伸出包含div。

The rendering of this control is far more complex than this, but still when the control is stripped down to this level, I have an issue where the textbox sticks out past the containing div.

推荐答案

您可以使用box-sizing：border-box来处理这个问题。只需把下面的css文件：
input {box-sizing：border-box}

You can use box-sizing:border-box to take care of this. Just put the following in your css file: input{box-sizing:border-box}

这意味着输入框上的边框实际上是在宽度，而不是添加到外部。这是什么使输入比容器更大。

It means that border on the input box is actually inside the width of the input rather than being added onto the outside. This is what is making the input larger than the container.

Paul Irish有很好的帖子解释这个技术http://paulirish.com/2012/box-sizing-border-box-ftw

Paul Irish has really good post explaining this technique http://paulirish.com/2012/box-sizing-border-box-ftw

他对填充的点也适用于边框。

The points he makes about padding also apply for the border.

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

There's even a compass mixin to make it easier to support older browsers. (http://compass-style.org/reference/compass/css3/box_sizing/)

这篇关于HTML输入元素宽于Containing Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！