0

我使用此处提出的行高方法将文本框与其标签对齐。我并没有简单地使用 width 属性，因为我希望它能够在标签文本发生变化时动态调整。为了让 Firefox（没有尝试过其他浏览器）将行高应用到带有输入的列，我不得不使用这个 hack（注意<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 回答