删除另一个元素后保持元素宽度静态，同时仍保持响应

Question

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

我创建了一个fiddle of the issue。

我知道我可以简单地为元素添加固定宽度，但是页面可以一直响应到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

您可以将“按钮”的最小宽度设置为100％（或任何使您的船真正漂浮的东西）。这样，无论按钮内的内容如何，​​该按钮将被迫占用任何父元素提供的相同数量的可用空间：

<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文件中。