css - 表单中的CSS标签元素无法正确显示

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

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

验证消息不会按需要出现，我希望它们像内联一样出现在输入元素旁边。

我相信标签或输入样式规则可能是造成此问题的原因。当它们浮动时，包含id的form的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;
}

对于我做错了什么的任何建议和解释，将不胜感激。

最佳答案

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

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

错误标签将仍然放置在输入字段的下方，因为它们继承了clear: both中的#aForm label，从而消除了浮动效果。幸运的是，您可以使用更具体的CSS选择器并删除clear来覆盖此设置：

#aForm label.error {
    clear: none;
}

关于css - 表单中的CSS标签元素无法正确显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11808363/