html - 在 div 容器中输入，不会拉伸

Question

我有一个包含输入的 div。我希望输入拉伸以填充可用空间，这适用于 Chrome，但不适用于 IE 和 Firefox。

<div class="outer">
    <input type="text" />
</div>

.outer{
    width: 100%;
    height: 40px;

    position: relative;
}

input{
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: 7px;
}

JSFiddle：http: //jsfiddle.net/wwMZg/1/

---

在 Chrome 中，它看起来像这样：

在 Firefox 和 IE 中，它看起来像这样：

---

• 在我的实际使用场景中，还有其他包含角图像的 div，这就是为什么在这个例子中将top, left, right,bottom值设置为7px的原因。

• 我想避免直接在 上设置宽度input，我不想在.outer.

Answer 1

大多数输入元素都有填充/边框。您需要使用 box-sizing 属性来调整元素尺寸的计算方式。

http://jsfiddle.net/wwMZg/5/

.outer {
    width: 100%;
    height: 40px;
}
.outer input {
    width: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://caniuse.com/#search=box-sizing

Answer 2

如果您box-sizing因为需要支持旧版浏览器而无法使用，并且不介意在标记中添加另一个元素，则可以使用中间 div

CSS

.outer{
    width: 100%;
    height: 40px; 
    position: relative;
}

.inner {
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 7px;
    right: 7px;    
}

input{
    width: 100%;
}

HTML

<div class="outer">
    <div class="inner">
        <input type="text" />
    </div>
</div>

小提琴：http: //jsfiddle.net/2mFgR/

Answer 3

控制输入​​元素的拉伸和高度

这个样式问题有点有趣，因为input元素似乎有自己的一套规则。

考虑以下 HTML：

<div class="outer">
    <div class="inner">
        <input type="text" />
    </div>
</div>

和CSS：

.outer {
    width: 100%;
    font-size: 20px;
    background-color: green;
    overflow: auto;
}
.inner {
    margin: 7px;
}
input {
    font-size: inherit;
    width: 100%;
    border: none;
} 

将输入字段包装在.inner元素中可以使其扩展至 100%，而不会触发顶级容器的水平溢出。

border: none但是，除非您在输入字段中设置，否则边距不会完全对称。这可以使用 box-sizing 来处理边框的宽度来解决。

关于 height 属性，input其行为类似于常规的内联、非替换元素，也就是说，高度值不适用，您需要使用 font-size 来控制高度。

在jsFiddle上查看演示

Answer 4

将 width:100% 添加到您的输入样式

    .outer{
    width:100%;
    height: 40px;
    position:absolute;
 }

input{
    position:relative;
    top: 7px;
    bottom: 7px;
    width:100%;
    padding:0px;
    margin-left:-1px;
    border:1px solid gray;
}

这是在 IE 中抵消它的边框