我正在构建一个垂直间距有限的多列/多行按钮板。代码如下:
.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>
我的按钮没有在行之间和按钮之间应用填充,而是在按钮上显示按钮。我需要行间距和按钮间距之间。全部居中。
我在这里做错了什么?
https://stackoverflow.com/questions/51489121
复制相似问题