1

当我单击发送按钮并显示红色验证消息时，表单左侧的标签（例如“姓名添加您的姓名”）似乎移动了位置。

该表格可在此处找到：

http://www.bestclowintown.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; 
}
4

3 回答 3

1

进行以下更改。

  • 将表单的宽度从 500 像素更改为 900 像素，以适应标签、输入和错误消息。
  • 添加明确：两者；到左侧标签。
  • 删除错误消息的 padding-left。
  • 将 height:40px 添加到错误消息中。

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

如果有任何问题，请告诉我。

于 2012-07-26T10:55:16.857 回答
0

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

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

#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; 
}

这可能会整理一些东西。

于 2012-07-26T10:30:26.787 回答
0

小狗胡子有帖子的解决方案是合适的。

虽然如果您希望/需要您的验证显示在右侧，那么您可能需要稍微编辑您的代码。

float 在 IE 浏览器中产生一些问题。仅当您想要极左或极右位置时才使用它。您可以使用..

display:inline-block;

利用，

*display:inline-block; (for ie-7/8)
于 2012-07-26T10:57:17.120 回答