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”属性根本不起作用。它无法垂直放置按钮。更奇怪的是，“保证金权利：150px;”属性不适用于我的btn2，并且这两个按钮仍然相互连接。顺便说一句，我的div足够大，可以将两个按钮分开放置。

Answer 1

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

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

这就是我如何解释你的代码并思考你可能想要实现的目标。

Answer 2

这是因为<a>自然是一个内联元素。如果要应用边距，则需要对其应用display: block;。

之后两个按钮将一个在另一个之上。如果您仍然希望它们彼此相邻，那么您应该float: left;它们。并且不要忘记应用某种.clearfix。

Answer 3

你应该使用margin-top和margin-left，而不是margin-bottom和margin-right ......

你可以使用第一个按钮的高度按下另一个按钮，就像这样

.btn1 { height:200px; }

如果你正在使用边距，你应该总是定义一些高度和宽度，比如

.btn1 { height:20px; width:100px; }
.btn2 { height:20px; width:100px; padding-top:150px; }

更新：关于浮动评论 - 浮动将两个按钮水平并排放置，我认为他希望他们垂直对齐

Answer 4

你可以尝试浮动：左;按钮。

如何在div中分成两个按钮？

4 个答案: