如何使彼此相邻的两个按钮始终具有相同的大小

Question

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

注意（在桌面布局中）：两个按钮的宽度相同。宽度由名称较长的宽度按钮决定。这意味着每个按钮不必占据屏幕的 50%。第一个按钮中的文本居中。此外，这两个按钮居中，中间有一些 space。

我有两个并排的按钮，如下代码所示：

.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>

我怎样才能使按钮始终具有相同的宽度和高度，而不管其中的内容如何。当屏幕尺寸较大时，按钮的尺寸由 'Button with a long name'.

的尺寸决定。

在小屏幕上，比如手机。按钮的高度应再次由 'Button with a long name'.

的高度决定

Answer 1

添加 50% 的 flex-basis 将使 children 成为 .my-buttons

宽度的 1/2

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

button {
  cursor: pointer;
  flex: 1 0 50%;
}

<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 2

.btn {
        flex: 1 1 0px;
}

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <div class="my-buttons d-flex">
      <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>

将它们设置为 flex-basis 为 0 并允许它们增长：

Answer 3

CSS网格可以做到这一点

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/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>

如何使彼此相邻的两个按钮始终具有相同的大小

How to make two buttons next to each other be the same size always

html

css

sass

button