CSS：元素被推倒

Question

我有一个问题，当用户在文本字段中输入文本时，动态显示和写入他/她留下的字符数的JavaScript会不断地将包含按钮/链接元素的包装器按下一定数量的单位。我希望按钮包装器能够保持固定，并且在JavaScript执行时不会移动。下面的屏幕截图说明了正在发生的事情。

BEFORE

AFTER

关于如何防止这种情况的任何一般性建议？

Answer 1

我不知道如何在文本框下方添加文字，但您可以为元素提供hidden的初始值visibility。它不会显示但会占用空间。

<强>更新

DEMO

您甚至可能不需要事先隐藏元素。如果你给它一个固定的高度，默认它是空的，它也可以。

Answer 2

将标签设置为position: absolute 这将导致布局引擎忽略它占用的任何空间。

或者，您可以在不使用时将其设置为visibility: hidden 这将使它始终占据空间，即使在隐藏时也是如此 然后，您可以相应地调整布局以使其适合。

Answer 3

将字符左侧文本置于绝对位置。

Answer 4

我看到了两种直接的方法：

1. 为包含消息的元素或包含字段和消息的元素指定固定大小，因此从一开始就有空间显示消息。

2. 对邮件使用绝对定位，以便它不会影响任何其他元素。