使用表单输入归档剩余空间

Question

好的，我说有一个这样的表单元素：

HTML：

<div class="form-item">
    <label>Current password</label>
    <input id="edit-current-pass" class="form-text" type="password" maxlength="128" size="25" name="current_pass" autocomplete="off">
    <div class="description">lorum ispum</div>
</div>

CSS：

.description {
    clear: both;
}

label {
    float: left;
    line-height: 34px;
    margin-right: 20px;
    width: 140px;
}
form input.form-text {
    background-image: none !important;
    border: 1px solid #E5E5E5;
    height: 30px;
    padding: 1px 2px;
}

是否可以使输入占据除左浮动标签元素之外的剩余宽度？

（FYI父容器的宽度设置为它）。

我想让这个响应更快，因此表单会增长并缩小到浏览器窗口。

Answer 1

我认为纯粹的HTML / CSS可能无法做到这一点，但我在输入框周围附加了一个包装器来管理它。 Check it out on JSFiddle

HTML

<div class="form-item">
    <label for="edit-current-pass">Current password</label>
    <span class="input">
        <input id="edit-current-pass" type="password" maxlength="128" size="25" name="current_pass" autocomplete="off">
    </span>
    <div class="description">lorum ispum</div>
</div>​

CSS

.description {
    clear: both;
}

label {
    float: left;
    line-height: 34px;
    margin-right: 20px;
    width: 140px;
}
.input {
    display: block;
    border: 1px solid #E5E5E5;
    padding: 1px 2px;
    overflow: auto;
}
.input input {
    display: block;
    float: left;
    background: transparent;
    width: 100%;
    height: 30px;
    border: 0;
    padding: 0;
    margin: 0;
}​