0

ここで提案する行の高さの方法を使用して、テキストボックスをラベルに揃えました。ラベルテキストが変更された場合に動的に調整したかったので、単にwidth属性を使用しませんでした。Firefox（他のブラウザを試したことがない）に入力を含む列に行の高さを適用させるには、このハックを使用する必要がありました（注<div class="hack">）：

HTML

    <div class="textbox-column label">
        <div>User Name:</div>
        <div>Password:</div>
    </div>
    <div class="textbox-column input">
        <div><div class="hack">#</div><input type="textbox" name="username" /></div>
        <div><div class="hack">#</div><input type="password" name="password" /></div>
    </div>
    <div class="clear"></div>

CSS

div.clear {
    clear:  both;
}

.textbox-column {
    line-height:1.6em;
}
.textbox-column.label {
    float:  left;
    margin-right:1em;
}
.textbox-column.input {
    float:  right;
}
.textbox-column .hack {
    display: inline;
    width: 1em;
    margin-right: -1em;
}

誰かがよりクリーンな解決策を提案できますか？

このコードのライブデモは次のとおりです：http：//jsfiddle.net/fbe7P/

4

1 に答える 1

3

CSS はグループ化されている場合に最適に機能するため、コントロールを行にグループ化します。

また、この方法のプラス面は、小さな画面サイズでは性能が低下することです。

HTML :

<div class="row">
    <label for="username">Username:</label>
    <input type="text" id="username" />
</div>

<div class="row">
    <label for="password">Password:</label>
    <input type="password" id="password" />
</div>​

CSS :

.row {
    overflow: auto;
}

.row label {
    float: left;
    min-width: 100px;
}

.row input {
    float: right;
}

デモ: http://jsfiddle.net/ezp9H/2/

于 2012-08-15T06:10:58.790 に答える