html - 将按钮行与 CSS 中的标题对齐

Question

我的 CSS 真的很糟糕，我正在尝试将按钮行与标题对齐。我当前的显示如下:

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.title {
}

.listofbuttons{
}

.button {
  margin: 2px;
  width: 25%;
}

<div class='container'>
  <div class='title'>This is a title</div>
  <div class='listofbuttons'>
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
    <button class="button">Button 3</button>
    <button class="button">Button 4</button>
    <button class="button">Button 5</button>
  </div>
</div>

我要做的是让所有按钮彼此对齐，同时保持与标题居中。我试过 float 并更改文本对齐方式，但正如您可能猜到的那样，按钮没有与标题对齐。

需要注意的是，添加到列表中的按钮数量是未知的，因此它可能是 1 个，也可能是 100 个。我也在尝试避免使用左边距/填充，以使其在屏幕上保持一致决议。

输出看起来像下面这样(不使用边距):

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.title {
}

.listofbuttons {
  margin-left: 125px;
}

.button {
  float: left;
  margin: 2px;
  width: 25%;
}

<div class='container'>
  <div class='title'>This is a title</div>
  <div class='listofbuttons'>
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
    <button class="button">Button 3</button>
    <button class="button">Button 4</button>
    <button class="button">Button 5</button>
  </div>
</div>

编辑:

更新删除固定宽度。

Answer 1

删除按钮本身的宽度，并为其容器设置 75% 的宽度和网格显示类型:

.container {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.title {}

.listofbuttons {
  display: -ms-grid;
  display: grid;
  -ms-grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  width: 75%;
  margin: 0 auto;
}

.button {
  margin: 2px;
}

<div class='container'>
  <div class='title'>This is a title</div>
  <div class='listofbuttons'>
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
    <button class="button">Button 3</button>
    <button class="button">Button 4</button>
    <button class="button">Button 5</button>
  </div>
</div>