html - 我怎样才能让我的按钮并排保持内联？

Question

我一直在尝试并排对齐 div 中的两个按钮。我已经尝试了一些我在 StackOverflow 上看到的建议，并且相信这是我格式化方式的一个特定问题，下面是代码。感谢您的帮助。

.beegButtons {
  display: inline-block;
  height: 150px;
  width: 150px;
  background-color: #D73F09;
  color: white;
  border: none;
  margin: 0px;
  padding: 0px;
}

.beegButtons:hover,
.beegButtons:focus {
  background-color: black;
  font-size: 15px;
}

#buttonBox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#buttonDiv {
  background-color: #D73F09;
  padding: 10px;
  height: 150px;
}

<div id="buttonDiv">
  <div id="buttonBox">
    <p class="fas fa-cloud">
      <button class="beegButtons" type="button">&nbsp;Meeting Minutes</button></p>

    <p class="fas fa-cloud">
      <button class="beegButtons" type="button">&nbsp;Presentation Slides</button></p>
  </div>
</div>

当前状态引用图片:

Answer 1

你可以添加这个css；

#buttonBox p{
    float:left;
    margin-right: 2px;
}