Html 标签和输入字段赢得'；Don’不要并排坐

下面的代码应该允许标签和输入字段彼此相邻。 知道问题出在哪里吗

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

.form{
宽度：500px；
浮动：左；
填充：20px 50px；
背景颜色：橙色；
}
标签格式{
浮动：左；
清除：左；
边缘底部：8px；
}
输入{
宽度：400px；
填充：5px20px；
边缘底部：8px；
背景：#F7F7F7；
边框宽度：1px；
边框样式：实心；
边框颜色：#333333；
}
名称
位置
公司
住址
城镇
邮政编码
联络电话。

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

---

谢谢

这是因为

标签

元素在类

表单

中，左右两侧都有50px的填充，使得总宽度如此之大，以至于

输入

元素无法在表单设置的500px宽度范围内适合其右侧大小

如果对本质上不同的元素使用相同的类名，则很容易混淆，如此处（

form

和

label

）。

标签

元素几乎不需要类，因为可以使用合适的上下文选择器，使用其祖先的类来引用它们

---

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

是否有理由使用

div.form label.form

和

input.input

？