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

入力が左側のフロートラベル要素以外の行の残りの幅を占めるようにすることは可能ですか？

（FYI親コンテナには幅が設定されています）。

フォームがブラウザウィンドウに合わせて拡大および縮小されるように、これを応答性の高いものにしたいと思います。

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 に答える