html - 标签和输入字段不会并排放置

Question

下面的代码应该允许我将标签和输入字段放在一起。 知道问题出在哪里吗？

.form{
    width:500px;
    float:left;
    padding:20px 50px;
    background-color:orange;
}

label.form{
    float:left;
    clear:left;
    margin-bottom:8px;
}

input.input{
    width:400px;
    padding:5px 20px;
    margin-bottom:8px;
    background:#F7F7F7;
    border-width:1px;
    border-style:solid;
    border-color:#333333;
}

<div class="form">
    <form action="process.php" method="post">
        <label class="form">Name</label><input type="text" name="name" class="input" />
        <label class="form">Position</label><input type="text" name="position" class="input" />
        <label class="form">Company</label><input type="text" name="company" class="input" />
        <label class="form">Address</label><input type="text" name="address1" class="input" />
        <label class="form">Town/ City</label><input type="text" name="town" class="input" />
        <label class="form">Postcode</label><input type="text" name="postcode" class="input" />
        <label class="form">Contact No.</label><input type="text" name="phone" class="input" />
        <input type="submit" name ="getcatalogue" class="button" value="Request Catalogue"/>
    </form>
</div>

出于某种原因，标签位于每个字段上方？ 任何帮助将不胜感激!

谢谢

Answer 1

这是因为 label 元素属于 form 类，左右有 50px 的填充，使得总宽度如此之大以至于 input 元素不适合其正确的大小，在为表单设置的 500 像素宽度内。

如果你对本质上不同的元素使用相同的类名，很容易混淆，就像这里(form 和 label)。 label 元素几乎不需要类，因为可以使用合适的上下文选择器，使用它们祖先的类来引用它们。

更好的设计是使用一个表格，其中一列是标签，另一列是输入字段，首先没有任何宽度设置，然后可能根据需要进行调整。