HTML 设置输入 100%

Question

我这里有问题。我想在另一个 width: 100% 元素内将输入标签设置为 width: 100%。

我尝试用 div 标签 替换输入并且成功了。但我需要它成为一个输入标签。

我的问题: http://jsfiddle.net/HDtz3/483/

输入只是“溢出”。我希望它填满整个蓝色 div。

Answer 1

需要给输入框设置宽度，加上float:left;红色容器也一样，它需要任意宽度以允许输入字段填满容器的其余宽度。

.red {
    width:5.5%;    
    background-color: red;
    float: left;
}

input {    
    margin: 0;
    width:94.5%;
    padding: 0;   
    float:left;
}

编辑:
否则，如果您确实无法设置宽度，则可以在蓝色容器上使用 overflow:hidden，然后移除其宽度。这样输入将填充容器的其余部分。

.red {
    float: left;
    background-color: red;
}

.blue {
    background: blue;
    overflow:hidden;
}

input {
    width: 100%;
    margin: 0;
    border: none;
    outline: 0;
    padding: 0;
}

演示

http://jsfiddle.net/HDtz3/496/