css - 如何让两个按钮在一个div中分开？

Question

这是我的两个按钮的代码:

HTML:

<div clas="buttons">
<a class="btn1" href="#">Ture</a>
<a class="btn2" href="#">False</a>
</div>

CSS:

.btn1 {
margin-bottom: 30px;
margin-left: 150px;
}
.btn2 {
margin-right: 150px;
}

但是，“margin-bottom:30px”属性根本不起作用。它无法垂直放置按钮。更奇怪的是，“margin-right: 150px;”属性不适用于我的 btn2，并且这两个按钮仍然彼此相邻。顺便说一句，我的 div 足够大，可以将两个按钮分开放置。

Answer 1

边距应该只应用于 block 级元素。如果将它们应用于内联，它们将产生意想不到的结果，即 <a>默认情况下:您可以设置填充而不是边距。并且确实按照@Mitz 正确建议的那样将它们反转。更正确的方法，但对初学者来说可能更难，是将 <a> 转换为阻止并向左浮动。就我个人而言，我的 CSS 看起来像这样:

.buttons {
 padding: 30px 150px;
 overflow: hidden; /* for clearfix */
}
.btn1, .btn2 {
  display: block;
}
.btn1 {
  float: left;
}
.btn2 {
  float: right;
}

这就是我解释您的代码并思考您可能想要实现的目标的方式。