html - 彼此相邻的位置按钮

Question

我想在彼此旁边显示我的“返回”和“确认”按钮。如您所见，我尝试执行 display:inline-block 但它没有用。我认为可能存在一些冲突代码，但我不确定它在哪里。这可能是一个愚蠢的问题，但请耐心等待。

这是我的代码:

.form__confirmation {
  padding: 0px 55px;
}

.form__confirmation2 {
  padding: 0px 55px;
}

button {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  background-color: #011f4b;
  border: 1px solid #DADDE8;
  color: #fff;
  padding: 18px;
  border-radius: 5px;
  outline: none;
  -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  left: 350px;
  margin-bottom: 20px;
  display: inline-block;
}

button:hover {
  background-color: #1293e1;
}

button:active {
  background-color: #1083c8;
}

<div class="form__confirmation" type="submit" name="submit">
  <button>Confirm Information</button>
</div>
<div class="form__confirmation2">
  <button>Back</button>
</div>

Answer 1

.form__confirmation,.form__confirmation2 {
      display: inline-block;
		}

<div class="form__confirmation" type="submit" name="submit">
  <button>Confirm Information</button>
</div>
<div class="form__confirmation2">
  <button>Back</button>
</div>

您将它们放置在 div 元素中，默认情况下它们是 display:block。在同一个 div 中包含两个按钮或使用 div{display:inline-block}。