3 колонки формы макета с DIV

Question

Я хочу создать форму с 3 столбцами, используя Div,

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>

Answer 2

<style>

.wrapperField {
    float:left;
    width:200px;
    margin-left:10px;
}

.wrapperField label{
    float:left;
    margin-right:10px;
    width:90px;
    overflow:hidden;
    white-space:nowrap;
    text-align:right;
}

.wrapperField input, .wrapperField textarea {
    float:left;
    width:100px;
}

</style>



    <div class="wrapperField">
        <label>testfasdf  asd asd  as ff er</label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test asdf asdf asdf asdf asdf </label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

    <br style="clear:left;" />

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

    <div class="wrapperField">
        <label>test</label>
        <input type="text" />
    </div>

@ mmanco Я изменил ваше решение. Теперь он отлично работает. В очередной раз благодарим за помощь. Я никогда не подумаю использовать свойства переполнения. Я просто поместил свойства переполнения на метку и указал ширину метки.

Answer 3

текстовое поле будет проходить под меткой, потому что вы установили фиксированную ширину 200 пикселей для этого элемента. так что, если он превысит 200px, он опустит его. это нормальное поведение

и я не думаю, что использование переполнения: скрытый поможет. Лучше использовать 2 колонки