首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用css在网格上等间距按钮

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

Stack Overflow用户
提问于 2018-07-24 09:11:45
回答 1查看 43关注 0票数 2

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

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>

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

我在这里做错了什么?

EN

回答 1

Stack Overflow用户

发布于 2018-07-24 09:15:53

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51489121

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档