1

好吧，假设我有一个这样的表单元素：

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

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

（仅供参考，父容器设置了宽度）。

我想让这个响应，以便表单增长和缩小到浏览器窗口。

4

1 回答 1

2

我认为这对于纯 HTML/CSS 可能是不可能的，但我在输入框周围使用了一个额外的包装器来管理它。在 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;
}​
于 2012-06-08T08:45:54.153 回答