当边框颜色改变时按钮移动答案

【问题标题】：Buttons moving when border color changed当边框颜色改变时按钮移动
【发布时间】：2016-04-13 15:25:56
【问题描述】：

如果您点击一个字段然后再点击它，它会变成红色，因为它的验证失败，但底部的按钮似乎会移动。

我正在使用http://www.formvalidator.net/ 插件进行验证。

谁能告诉我是什么导致按钮移动？

由于源代码太大而被删除，可以在http://bit.do/bVpn9看到

【问题讨论】：

【解决方案1】：

当表单验证并抛出错误时，在按钮之后由 JS 插入到 DOM 中的 span 错误消息。

EG。

<span class="help-block form-error">You have not given a correct e-mail address</span>

大概这条消息会改变长度，因此会跳来跳去。

你看不到，因为有规则

body span {
    opacity: 0;
}

这并没有改变，也许应该如此。

添加新规则

span.help-block.form-error {
    opacity: 1;
    display: block;
}

这将使消息可见并将其移动到按钮下

【讨论】：

【解决方案2】：

似乎是因为错误跨度出现在按钮的右侧。我猜想整个 div 都是居中的，而不仅仅是按钮。这会导致按钮向右移动。

此时不透明度为0。

    body span {
        opacity: 0;
    }

如果你把它变成

    body span {
        opacity: 1;
    }

您可以清楚地看到它为什么会发生变化。如果您打算显示消息，则解决方案是更改不透明度。如果您根本不想显示消息并希望确保按钮不会向左移动，您应该停止代码显示错误范围或（如果您不知道如何执行此操作）添加一个

    style='display:none;'

到跨度。这可以如上所示内联完成，也可以在 style.css 文件中完成。

【讨论】：

【解决方案3】：

你有一个 span 类，当填写代码出错时会显示：

<span class="help-block form-error">You have not given a correct e-mail address</span>

虽然您将不透明度设置为 0，但文本仍然存在。

body span {
    opacity: 0;
}

因此，您必须更改控制“错误”类并添加到跨度文本中的任何 jQuery 或插件。

不过，如果您想要临时修复，请将其添加到您的 css 中，它会阻止按钮移动。

body span {
    display: none;
    opacity: 0;
}

这将删除跨度文本，但建议您进入插件并在那里进行编辑。

【讨论】：

@Paulie_D 给出的答案相同。 JS.
答案不一样。 Paulie 的回答使文本可见。此解决方案使文本不显示。
同样的逻辑，这就是我要说的。他发现了问题，我可以做基本的 CSS 来解决我想要的问题。不是说你做错了什么，只是在他发布后 4 分钟指出，然后你发布了与该问题相同的答案，这正是我所要求的。此外，您的答案将隐藏所有跨度......不是它自己的错误跨度。