html - 当我添加显示 : inline; 时，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>