当显示验证标签时，标签元素上的CSS bug以形式出现

Question

当我单击“发送”按钮并显示红色验证消息时，表单左侧的标签(如“名称添加您的名称”)似乎会移动。

表格可在此找到：

http://www.bestclownintown.co.uk/book.php

下面是标签的CSS规则，第二个规则用于错误消息。是否要修改这些CSS规则或其他元素的规则，以确保单击“发送”时，左侧显示黑色标签，右侧显示红色验证标签。

#stylized label {
display: block;
font-weight: bold;
text-align: left;
width: 140px;
float: left;
}

label.error {  
color: red; 
padding-left: .5em; 
vertical-align: top; 
}

Answer 1

执行以下更改。

• 将表单的宽度从500 it更改为900 it，以适应标签、输入和错误消息。
• 加清楚:两者都加在左边标签上。
• 删除填充物-左为错误信息。
• 将高度:40 to添加到错误消息中。

所有样式都是在style.css中定义的。因此，请检查用于上述更改的类，并在该文件中执行所需的更改。

如果还有什么问题，请告诉我。

Answer 2

将完全相同的css应用于原始标签和错误标签，因为它们都是与#样式化标签匹配的

您应该向每个标签中添加一个类。或者，您可以为错误标签编写特定的样式，例如：

#stylized label {
display: block;
font-weight: bold;
text-align: left;
width: 140px;
float: left;
clear: both;
}

#stylized label.error {  
color: red; 
padding-left: 140px; 
vertical-align: top;
float: left; 
}

这可能会把事情弄得更整齐一些。