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 回答