Question

我需要对齐12个按钮，这样顶部有4个按钮，侧面有3个按钮（12）。 4x3的左上角的两个按钮（Div / Mult）和右侧（Add / Sub）

我将包含HTML和CSS文档，如果您需要JS文档，请不要犹豫。这就是我想要它的样子，我不知道如何。

Div / MultBtn Add / 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>

结果图片

Answer 1

如果你想要漂浮一些东西，你需要：

设置位置：relative
设置float：left

为什么每个div后都会有<br />标记？这应该有效：

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

如何在css中并排对齐4个容器？

1 个答案: