CSS:元素被下推

发布于 2024-10-10 06:37:42 字数 360 浏览 4 评论 0 原文

我遇到一个问题,当用户在文本字段中输入文本时,动态显示和写入他/她留下的字符数的 JavaScript 不断将包含按钮/链接元素的包装器向下推一定数量的单位。我希望按钮包装器在 JavaScript 执行操作时保持固定而不移动。下面的屏幕截图说明了正在发生的情况。

之前

alt text

之后

alt text

关于如何防止这种情况的一般建议?

I have an issue where when the user inputs text into the textfield, the JavaScript that dynamically displays and writes how many chars he/she has left keeps pushing the wrapper that contains the button/links elements down a certain number of units. I want the button wrapper to stay fixed and not move when the JavaScript does it's thing. The screenshots below illustrate what is happening.

BEFORE

alt text

AFTER

alt text

Any general suggestions as to how you prevent this?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

差↓一点笑了 2024-10-17 06:37:42

我不知道如何在文本框下方添加文本,但您可以为元素指定初始 visibility隐藏。它不会显示,但会占用空间。

更新:

DEMO

你可能甚至不需要预先隐藏该元素。如果你给它一个固定的高度并且默认情况下它是空的,它也可以工作。

I don't know how you add the text below the textbox but you could give the element an initial visibility value of hidden. It won't be shown but it will occupy space.

Update:

DEMO

You might not even need to hide the element beforehand. If you give it a fixed height and it is empty by default, it works as well.

拥抱我好吗 2024-10-17 06:37:42

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

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

Set the label to position: absolute.
This will cause the layout engine to ignore any space that it occupies.

Alternatively, you can set it to visibility: hidden when not in use.
This will cause it to always occupy space, even when hidden.
You can then adjust your layout accordingly to make it fit.

荒岛晴空 2024-10-17 06:37:42

将字符绝对放置在文本左侧。

Position the chars left text absolute.

对不⑦ 2024-10-17 06:37:42

我看到两种直接的方法:

  1. 为将包含消息的元素或包含字段和消息的元素指定固定大小,以便从一开始就有空间容纳消息。

  2. 对消息使用绝对定位,这样它就不会影响任何其他元素。

I see two straight forward ways of doing this:

  1. Specify a fixed size for the element that will contain the message or the element containing the field and the message, so there is room for the message from the start.

  2. Use absolute positioning for the message, so that it doesn't affect any other elements at all.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文