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元素不适合它的右边大小，在表格的500px宽度范围内。

如果您对基本上不同的元素使用相同的类名，则很容易混淆，如此处（form和label）。 label元素几乎不需要类，因为它们可以使用合适的上下文选择器，使用它们的祖先类来引用。

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

标签和输入字段不会彼此并排放置

1 个答案: