0

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

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 足够大，可以将两个按钮分开放置。

4

4 回答 4

5

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

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

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

于 2012-08-06T16:12:04.530 回答
1

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

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

于 2012-08-06T16:14:31.887 回答
0

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

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

.btn1 { height:200px; }

如果您使用边距，则应始终定义一些高度和宽度，例如

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

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

于 2012-08-06T16:00:38.620 回答
0

你可以试试 float:left; 按钮。

于 2012-08-06T16:02:06.997 回答