用文本和<input /> </div>填充<div>

Question

如何使用文本和输入填充<div>元素，以便<div>调整大小后输入变得更短/更长？

我坐了2个小时，我就是说不对。

Answer 1

这是一个跨浏览器解决方案，Pure CSS

Demo

<强> HTML：

<div class="Container">
    <label>text</label>
    <div class="Fill"><input type="text" /></div>
</div>

<强> CSS：

.Container
{
    background-color:#B5E51D;
    padding: 5px;
}
label
{
    float: left;
    padding: 0 10px;
}
.Fill
{
    overflow: hidden;
}
input
{
    width: 97%;
    margin: 0 1%;
}

Answer 2

喜欢这个

<强> demo

<强> CSS

.divbg{
    background-color:#B5E51D;
    padding:5px;
    overflow:hidden;
    width:100%;
    }
label{
    float:left;
    margin:0 0 0 20px;
}
input{
    float:left;
    background-color:#ED1B24;
    color:white;
    border:none;
    padding:2px 5px;
    margin:0 0 0 20px;
   min-width:200px;
}
.pull-left{
    float:left;
}