html - 使用css在网格上等间距按钮

Question

我正在构建一个垂直间距有限的多列/多行按钮板。这是代码:

JSFiddle here

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px;
  margin: 0px;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: red;
  height: 30px;
}

.buttons {
  display: flex;
  flex-direction: column;
  height: 100px;
  overflow-y: scroll;
}

.button-line {
  display: flex;
  flex-direction: row;
  padding-bottom: 30px;
}

.button-line button {
  width: 100%;
  color: red;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
}

.button-line button:hover {
  color: white;
  background-color: red;
}

<div class="container">

  <div class="title">
    OPTIONS
  </div>
  <div class="buttons">
    <div class="button-line">
      <div class="button">
        <button>TEST BUTTON 1</button>
      </div>
    </div>

    <div class="button-line">
      <div class="button">
        <button>TEST BUTTON 2</button>
      </div>
      <div class="button">
        <button>TEST BUTTON 3</button>
      </div>
    </div>

    <div class="button-line">
      <div class="button">
        <button>TEST BUTTON 4</button>
      </div>
    </div>
  </div>
</div>

我的按钮没有在行之间和按钮之间应用填充，而是在按钮上显示按钮。然后我需要行间距和按钮间距。全部居中。

我做错了什么？

Answer 1

您在 .buttons 上强制使用显式 height: 100px;，您应该将其删除。如果您需要保持该高度但希望 .buttons 的内容可滚动，您可以删除 display: flex; 和 flex-direction: column;。更新了 jsfiddle:https://jsfiddle.net/gnhb9Lu7/3/

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px;
  margin: 0px;
}

.title {
  width: 100%;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: red;
  height: 30px;
}

.buttons {
  height: 100px;
  overflow-y: scroll;
}

.button-line {
  display: flex;
  flex-direction: row;
  padding-bottom: 30px;
}

.button-line button {
  width: 100%;
  color: red;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background-color: white;
  border-radius: 4px;
  padding: 20px;
}

.button-line button:hover {
  color: white;
  background-color: red;
}

<div class="container">

  <div class="title">
    OPTIONS
  </div>
  <div class="buttons">
    <div class="button-line">
      <div class="button">
        <button>TEST BUTTON 1</button>
      </div>
    </div>

    <div class="button-line">
      <div class="button">
        <button>TEST BUTTON 2</button>
      </div>
      <div class="button">
        <button>TEST BUTTON 3</button>
      </div>
    </div>

    <div class="button-line">
      <div class="button">
        <button>TEST BUTTON 4</button>
      </div>
    </div>
  </div>
</div>