css 如何正确间隔网格元素

pnwntuvh  于 2023-02-01  发布在  其他
关注(0)|答案(1)|浏览(120)

我想把这种风格应用到我当前的代码中,但是空格不适合网格div,它们在下面溢出:

.square {
    width: 20%;
    height: 20%;
    border: 1px solid black;
    box-sizing: border-box;
    margin: 1%;
    border-radius: 5px;
  }

下面是我当前的HTML/CSS:
x一个一个一个一个x一个一个二个x
我还想将整个容器垂直和水平居中在屏幕中心,并将px转换为%
我试过编辑各种高度和宽度的元素,但似乎不能得到它的工作。

mkh04yzy

mkh04yzy1#

好吧,试试用这个css:

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 80%;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  width: 60%;
  height: 60%;
  margin: 0 10%;
}

.square {
  width: 20%;
  height: 20%;
  border: 1px solid black;
  box-sizing: border-box;
  margin: 1%;
  border-radius: 5px;
}

.selector {
  width: 20%;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10%;
}

.bet-amount {
  margin: 5%;
}

.button {
  margin: 5%;
}

相关问题