代码之家 › 专栏 › 技术社区 › Jean-Francois

带DIV的3列表单布局

html forms css

Jean-Francois · 技术社区 · 14 年前

我想用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>

3 回复 | 直到 14 年前

Maxim Manco 14 年前

请尝试以下布局

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

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

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

Jean-Francois 14 年前

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

@我确实改变了你的解决方案。现在效果很好。再次感谢你的帮助。我永远不会想到使用溢出属性。我只是把溢出属性放在标签上,并在标签上指定一个宽度。