css - 在页面上显示验证消息后，我的注册表单 CSS 中断了

Question

这是我提交前的表格:

这是我提交后的表单:

这是 css 为每个字段编写的内容:

.form-group {
    margin: 2% 0% 0% 0%;
    padding: 1% 1% 0% 0%;
}

此 css 用于错误消息:

.error {
    color: #FF0000;
    font-size: 0.9em;
    text-transform: capitalize;
}

请看，在呈现验证消息后，CSS 被破坏并且表单高度被扩展。如何在最小的空间内管理它以使我的表单看起来不错？

Answer 1

简单(不推荐)的方法是:

.error {
    color: #FF0000;
    font-size: 0.8em;
    line-height: 0.8em;
    text-transform: capitalize;
}

查看组件是否仍然从图像中掉落，如果是，则降低行高。我强烈建议设置其他颜色，红色很难阅读或在上面添加一些背景。