我想要带有时间框上方的按钮

Question

我希望按钮位于框上方，但我不知道该怎么做，我尝试了很多方法但没有奏效

像这样的东西，知道如​​何将这些按钮放在上面

这是我的 HTML 代码

  <div id="clockdiv">
    <div id="time">
      <span class="minutes"></span>
      :
      <span class="seconds"></span>
    </div>
  </div>
  <div>
      <div>
        <img src="imgs/stop.png"  class="btnStop" id="btnStop"/>
      </div>
      <div>
        <img src="imgs/play.png" class="btnPlay"  type="button" id="btnPlay"/>
      </div>
      <div>
        <img src="imgs/pause.png"  class="btnPause"  type="button" id="btnPause"/>
      </div>
      <div>
        <img src="imgs/play.png"  class="btnResume"  type="button" id="btnResume"/>
      </div>
    </div>

</body>
</html>

这是我的 CSS

.btnStop {
  width: 30%;
  height: 30%;
  display: none;
}

.btnResume {
  width: 30%;
  height: 30%;
}

.btnPlay {
  width: 30%;
  height: 30%;
}

.btnPause {
  width: 30%;
  height: 30%;
  display: none;
}

不知道该尝试什么，因为我对 CSS 毫无用处

Answer 1

这是css 网格的完美用例

凭借您提供的少量信息，我只能为您提供这么多帮助，但我相信您可以根据自己的需要定制我的解决方案

 #container { display: inline-grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, max-content); align-items: center; align-content: center; justify-content: center; } #container > button { width: 30px; height: 30px; } #timer { grid-column: 1 / span 4; grid-row: 2; text-align: center; font-size: 30px; }

 <div id="container"> <button class="btnPlay">▶️</button> <button class="btnPause">⏸️</button> <button class="btnStop">⏹️</button> <button class="btnResume">⏯️</button> <div id="timer">30:00</div> </div>