位置按钮彼此相邻

Question

我想在彼此旁边显示我的后退和确认按钮。正如你所看到的，我尝试了显示：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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

你需要应用display：inline-block;你的容器就像这样：

.form__confirmation {
		  padding: 0px 55px;
      display: inline-block;
		}
		
		.form__confirmation2 {
		  padding: 0px 55px;
      display: inline-block;
		}

		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>