时间戳

首页 > 解决方案 > 使用css在网格上等间距按钮

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

问题描述

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

JSFiddle在这里

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

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

我在这里做错了什么？

标签： htmlcss

解决方案

您正在强制显式height: 100px;on .buttons，您应该将其删除。如果您需要保持该高度但又希望 的内容.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>

推荐阅读