标签和输入框不会坐在一起彼此

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类之中，对左，右50像素填充，使得总宽度大到input元素不适合它的大小合适，宽度内为表单设置500px。

如果您对相同的类名使用基本上不同的元素，则会很容易混淆，因为这里（form和label）。所述label元件几乎不需要一个类，因为它们可以被称为使用合适的上下文选择器，使用其祖先的类。

一种更好的设计将在一列中使用的表的标签，在其他输入字段，第一无任何宽度设置，那么也许如果需要调整。