表单中的CSS标签元素将无法正常显示

Question

当我点击此处找到的表单上的sumbit时：

http://test-bed.co.uk/garden/book.php

验证消息没有按预期显示，我希望它们与输入元素一起显示，就好像它们是内联的一样。

我认为标签或输入样式规则可能导致问题。当它们浮动时，带有id形式的容器div向左浮动。

#aform label {
    clear: both;
    display: block;
    float: left;
    font-weight: bold;
    text-align: left;
}

.inputstyle2 {
    float: left;
    margin-right: 240px;
    width: 300px;
}

#form {
    float: left;
}

对我所做错的任何建议和解释都将不胜感激。

Answer 1

首先，您需要删除margin-right并在clear: both中添加.inputstyle2：

.inputstyle2 {
    clear: both;
    width: 300px;
}

错误标签仍会放在输入字段下方，因为它们会在clear: both中继承#aForm label，这会删除浮动效果。值得庆幸的是，您可以使用更具体的CSS选择器并删除clear：

来覆盖它

#aForm label.error {
    clear: none;
}