html - 如何使两个相邻的按钮始终大小相同

Question

注意(在移动布局中):两个按钮具有相同的高度。高度由名称较长的按钮决定。第一个按钮中的文本垂直和水平居中。

注意(在桌面布局中):两个按钮具有相同的宽度。宽度由名称较长的宽度按钮决定。这意味着按钮不必各自占据屏幕的 50%。第一个按钮中的文本居中。此外，两个按钮居中，之间有一些空间。

我有两个相邻的按钮，如下面的代码所示:

.my-buttons {
    display: flex;
    justify-content: center;
    button {
        cursor: pointer;
    }
}

---

  <div class="my-buttons">
      <button type="button" class="btn btn-outline-primary">
        1st Button
      </button>
      <button type="button" class="btn btn-outline-primary">
        Button with a long name.
      </button>
  </div>

如何才能使按钮始终具有相同的宽度和高度，而不管其中的内容如何。当屏幕尺寸较大时，按钮的尺寸由“名称较长的按钮”的尺寸决定。

当在小屏幕上时，例如移动设备。按钮的高度应再次由“具有长名称的按钮”的高度确定。

Answer 1

CSS 网格可以做到这一点

.my-buttons {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcd1d1cacdcaccdfcefe8b908f908f" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="text-center">
  <div class="my-buttons">
    <button type="button" class="btn btn-outline-primary">
        1st Button
      </button>
    <button type="button" class="btn btn-outline-primary">
        Button with a long name.
      </button>
  </div>
</div>