在删除另一个元素后保持元素宽度不变，同时仍保持响应

Question

我有一个带有一些文本的按钮，当用户按下按钮时，我将其替换为加载符号。当我删除按钮内的文本并将其替换为微调器时，按钮会缩小。

我知道我可以简单地向元素添加固定宽度，但是页面响应一直到 300 像素。我也知道我可以添加媒体查询来解决这个问题，但我想知道是否有更简单的方法通过 LESS 或 vanilla CSS 来处理这个问题而不需要所有媒体查询？

这是我的基本设置：

<button>
  <span class="hidden-conditionally">
    Click here to perform an action!
  </span>

  <span id="spinner" class="displayed-conditionally">
    Loading...
  </span>
</button>

Answer 1

您可以将那个 "button" 的 min-width 设置为 100%（或者任何真正让您的船漂浮的东西）。这样，无论按钮中的内容如何，按钮都将被迫占用任何父元素提供的相同数量的可用 space：

<button style="min-width:100%">
  <span class="hidden-conditionally">
    Click here to perform an action!
  </span>

  <span id="spinner" class="displayed-conditionally">
    Loading...
  </span>
</button>

此修复不必是内联样式属性，也可以将其添加到关联的 .css 文件中。

在删除另一个元素后保持元素宽度不变，同时仍保持响应

Keeping an elements width static after removing another element while still remaining responsive

html

css

less