如何对齐右侧的文本和左侧的按钮并使其具有响应性 css答案

【问题标题】：How to align the text on the right and the button on the left and make it responsive css如何对齐右侧的文本和左侧的按钮并使其具有响应性 css
【发布时间】：2022-02-10 18:09:09
【问题描述】：

我有一张卡片，我想将左侧的文本和右侧的按钮与两者之间的空格对齐，并将其放在设备上的响应式知道我添加背景图片的按钮

这是我尝试过的，但它仍然没有响应

.component {
  display: flex;
  justify-content: space-between;
}

.link {
  display: flex;
  justify-content: center;
  background-image: url("../../myicon.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
  height: 24px;
  width: 64px;
}

<div class="component">
  <div>
    <span class="">DEV</span>
  </div>
  <div>
    <div class="btn">
      <button><a  class='link'>Button </a></button>
    </div>
  </div>
</div>

【问题讨论】：

“它没有响应”是什么意思？ flex 似乎可以按您的意愿工作 - 将文本放在左侧，将按钮放在右侧，无论视口大小如何。顺便说一句，您不应该在 <button> 元素中嵌套交互式元素，例如 <a> 元素，反之亦然。
当我缩小屏幕或使用移动版本时，按钮未固定，超出了我的卡所在位置。它超出了卡的限制
你能不能提供一个 sn-p 来证明这个问题，因为到目前为止我们可以尝试的工作正常。

标签： html css

【解决方案1】：

我认为你想要这样的东西（紧密分组）

<div class="component">
'    <span class="link">DEV</span>
    <div class="btn">
      <button>Button</button>
    </div>
</div>

但是然后 .

.btn {
  float : left;
}

或者您可能希望主播实际做某事，所以可能是<a onclick="..." href="...">Dev</a>。始终尽量保持简单。每个组件——容器组件、span、div、按钮、锚点都应该有自己的东西。我可以想象将来会在这个容器组件中添加更多的东西（一个图像，一个信息的 ajax 等等），所以现在越简单，将来调整就越简单。

【讨论】：

未知属性：'align'scss(unknownProperties)
@wilfrid，谢谢，我更正了。
我已经尝试过了，但它不起作用