css - 3 带DIV的列形式布局

Question

我想使用 Div 创建一个包含 3 列的表单，

Label : Textbox     Label : Textbox    Label : Textbox
Label : Textbox     Label : Textbox    Label : Textbox

如果有人可以帮助我，我将不胜感激。

注意:标签将是多语言的，其他语言的文本可能会更长。这是我在 div 方法中看到的主要问题。如果标签较长，文本框将自动移至标签下方，这是不正确的。

<style>
.wrapperField{
    float:left;
    width:200px;
}
</style>
<div class="wrapperField">
    <Label .....
    <input type="text....
</div>

<div class="wrapperField">
    <Label .....
    <input type="text....
</div>

<div class="wrapperField">
    <Label .....
    <input type="text....
</div>

Answer 1

请尝试以下布局

<style>
.wrapperField {
    float: left;
    width: 200px;
    overflow: hidden;
}

.wrapperField label {
    float: left;
    margin-right: 10px;
}

.wrapperField input, .wrapperField textarea {
    float: right;
}
</style>