css - 表单中的 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;
}