当我添加显示时，CSS 不适用于 2 个 DIV 标签：内联；

Question

所以我正在创建一个带有两个按钮的代码编译器： 运行和下载。但是我没有使用<button> 标签，而是使用<div> 标签，这样我的按钮可以有更多种类的CSS 样式。但问题是，当我尝试通过从 RUN 按钮复制和粘贴相同的代码来制作第二个按钮时，当我需要它们在同一行时，DOWNLOAD 按钮位于 RUN 按钮下方。

所以，我添加了 display: inline; 样式，但这只是搞砸了一切，并且 div 的样式不起作用。唯一有效的样式是 div 按钮中的文本样式，以及将文本居中到页面中间的样式。

代码如下：

.dbutton,
.button {
  background-color: red;
  margin-right: 300px;
  box-shadow: 0px 0px 5px gray;
  font-size: 20px;
  color: blue;
  text-align: center;
  width: 100px;
  height: 50px;
}

.btn-text {
  margin-top: 10px;
  padding-top: 12px;
}

.dbtn-text {
  margin-top: 10px;
  padding-top: 12px;
}

.dbutton:hover,
.button:hover {
  background-color: white;
  -webkit-user-select: none;
}

.dbutton:active,
.button:active {
  background-color: #00ad08;
}

div {
  display: inline;
}

<div class="button">
  <p class="btn-text">
    Run &gt;&gt;
  </p>
</div>

<div class="dbutton">
  <p class="dbtn-text">
    Download &darr;
  </p>
</div>

如果你想要完整的代码，这里是链接。
JSFIDDLE

两个 div 没有样式，按钮中的文本放在页面中间。我需要两个 div 并排放置，这样样式才能正常工作。请帮帮我！

Answer 1

.btn-bar {
  position:relative
  /* ... */
}
.btn {
  float:left;
  background:red;
  width:7em;
  padding:11px 3px;
  margin:3px;
  text-align:center;
  text-transform:uppercase;
  box-shadow:0 0 3px 0 #000;
}

<div class="btn-bar">
  <div class="btn">run</div>
  <div class="btn">compile</div>
</div>