网格上如何使用CSS的等距按钮?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (63)

我正在建立一个多列/多行按钮垫有限的垂直间距。以下是代码:

JSFiddle在这里

HTML:

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

CSS

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

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

我在这里做错了什么?

提问于
用户回答回答于

你是在强迫height: 100px;在……上面.buttons你应该把它移走。 参考这里: https:/jsfiddle.net/gnhb9Lu7/1/

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

扫码关注云+社区

领取腾讯云代金券