我需要对齐 12 个按钮，以便顶部有 4 个按钮，侧面有 3 个按钮 (12)。 4x3 左上角 (Div/Mult) 和右上角 (Add/Sub) 还有 2 个按钮
我将包含 HTML 和 CSS 文件，如果您需要 JS 文件，请随时询问。 这就是我想要的样子，但我不知道该怎么做。
Div/MultBtn 添加/SubBtn
1 2 3 4(一直到另一边)
<!DOCTYPE html>
<html>
<head>
<title>Math Fact Tune Up</title>
<style>
#buttonContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
}
button {
display: block;
margin: 0 auto;
background-color: #262b2b;
border-style: solid;
color: white;
font-family: Open Sans, sans-serif;
border-radius: 5px;
}
.lvlButton {
padding-bottom: .1em;
padding-top: .1em;
}
body,
html {
height: 100%;
overflow: scroll;
overflow-x: hidden;
background-color: #262b2b;
}
body {
overflow: hidden;
}
#go {
background-color: #00d10d
}
</style>
</head>
<body>
<div id="buttonContainer">
<div class="lvlButton" id="divMult">
<button id="divMultBtn">
Multiplication/Division
</button>
</div>
<br>
<div class="lvlButton" id="addSub">
<button id="addSubBtn">
Addition/Subtraction
</button>
</div>
<br>
<div class="lvlButton" id="lvl1">
<button id="lvl1Btn">
Level 1
</button>
</div>
<br>
<div class="lvlButton" id="lvl2">
<button id="lvl2Btn">
Level 2
</button>
</div>
<br>
<div class="lvlButton" id="lvl3">
<button id="lvl3Btn">
Level 3
</button>
</div>
<br>
<div class="lvlButton" id="lvl4">
<button id="lvl4Btn">
Level 4
</button>
</div>
<br>
<div class="lvlButton" id="lvl5">
<button id="lvl5Btn">
Level 5
</button>
</div>
<br>
<div class="lvlButton" id="lvl6">
<button id="lvl6Btn">
Level 6
</button>
</div>
<br>
<div class="lvlButton" id="lvl7">
<button id="lvl7Btn">
Level 7
</button>
</div>
<br>
<div class="lvlButton" id="lvl8">
<button id="lvl8Btn">
Level 8
</button>
</div>
<br>
<div class="lvlButton" id="lvl9">
<button id="lvl9Btn">
Level 9
</button>
</div>
<br>
<div class="lvlButton" id="lvl10">
<button id="lvl10Btn">
Level 10
</button>
</div>
<br>
<div class="lvlButton" id="lvl11">
<button id="lvl11Btn">
Level 11
</button>
</div>
<br>
<div class="lvlButton" id="lvl12">
<button id="lvl12Btn">
Level 12
</button>
</div>
<div class="lvlButton" id="gocontainer">
<button id="go">
GO
</button>
</div>
</div>
</body>
</html>结果图片
最佳答案
如果你想让东西漂浮，你需要:
- 设置position:relative
- 设置 float :左
为什么你会有 <br />每个div之后的标签？这应该有效:
#buttonContainer {
position: relative;
top: 50%;
transform: translateY(-50%);
}
button{
display: block;
margin: 0 auto;
background-color: #262b2b;
border-style: solid;
color: white;
font-family: Open Sans, sans-serif;
border-radius: 5px;
}
.lvlButton{
padding-bottom: .1em;
padding-top:.1em;
float: left;
}
body, html{
height:100%;
overflow: scroll;
overflow-x: hidden;
background-color: #262b2b;
}
body{
overflow: hidden;
}
#go{
background-color: #00d10d
}<div id="buttonContainer">
<div class="lvlButton" id="divMult">
<button id="divMultBtn">
Multiplication/Division
</button>
</div>
<div class="lvlButton" id="addSub">
<button id="addSubBtn">
Addition/Subtraction
</button>
</div>
<div class="lvlButton" id="lvl1">
<button id="lvl1Btn">
Level 1
</button>
</div>
<div class="lvlButton" id="lvl2">
<button id="lvl2Btn">
Level 2
</button>
</div>
<div class="lvlButton" id="lvl3">
<button id="lvl3Btn">
Level 3
</button>
</div>
<div class="lvlButton" id="lvl4">
<button id="lvl4Btn">
Level 4
</button>
</div>
<div class="lvlButton" id="lvl5">
<button id="lvl5Btn">
Level 5
</button>
</div>
<div class="lvlButton" id="lvl6">
<button id="lvl6Btn">
Level 6
</button>
</div>
<div class="lvlButton" id="lvl7">
<button id="lvl7Btn">
Level 7
</button>
</div>
<div class="lvlButton" id="lvl8">
<button id="lvl8Btn">
Level 8
</button>
</div>
<div class="lvlButton" id="lvl9">
<button id="lvl9Btn">
Level 9
</button>
</div>
<div class="lvlButton" id="lvl10">
<button id="lvl10Btn">
Level 10
</button>
</div>
<div class="lvlButton" id="lvl11">
<button id="lvl11Btn">
Level 11
</button>
</div>
<div class="lvlButton" id="lvl12">
<button id="lvl12Btn">
Level 12
</button>
</div>
<div class="lvlButton" id="gocontainer">
<button id ="go">
GO
</button>
</div>
</div>关于html - 如何在CSS中并排对齐4个容器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41525549/