Question

我的网页表单字段排列不正确。

见屏幕截图：http://awesomescreenshot.com/00cw0c80e

标签比正常标签长但是我需要那么长。如果我缩短标签，它会按预期排列。

任何人都可以提供帮助吗？

谢谢！：）

PS。我看过网上的各种样本，但没有去。

我的css

input.issu {
    margin-bottom: 8px;
    width: 220px;
}

label.issu {
    display: block;
    float: left;
    margin-bottom: 8px;
    padding-left: 10px;
    padding-right: 10px;
    width: 270px;
    text-align: left;
    vertical-align: top;
}

select.issu {
    margin-bottom: 8px;
    width: 240px;
}

br.issu {
    float: clear;
}

我的HTML代码（我尝试使用和不使用div标签）

        <div>
        <label for="departingFrom" class="issu">Direct flight into Singapore from (please name city)<span class="red">* required</span></label>
        <input id="departingFrom" name="departingFrom" class="issu" value="" type="text">
        <br class="issu">
        </div>

        <div>
        <label for="additionalInfo" class="issu">Additional info(e.g. accompanying family members)<span class="red">* required</span></label>
        <input id="additionalInfo" name="additionalInfo" class="issu" value="" type="text">
        <br class="issu">
        </div>

Answer 1

将 overflow：hidden 属性添加到标签的容器div并输入如下。它会正常工作。

的CSS：

div{
    overflow:hidden
}

Answer 2

使用表格，将标签放在一列中，在另一列中输入字段。然后根据需要在单元格上设置vertical-align（在这样的情况下，对“排队”的含义有不同的解释）。

使Web表单字段排成一行

2 个答案: