html - 填写一个带有文字和

Question

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

我坐了 2 个小时，我就是不能把它弄好。

Answer 1

这是一个跨浏览器解决方案，纯 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

像这样

演示

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;
}