html - CSS元素堆叠，ontop错误

Question

我不知道为什么我的按钮会堆叠在一起，我设置了一个高度并给出了边距，但它们仍然相互堆叠。我不想使用显示: block ；因为这给了他们一个完整的宽度，我不想定义宽度，因为我希望按钮根据字数改变宽度。

<a class="btn blue-btn" href="#">Button</a>

.blue-btn{
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #1b93b7;
}

.btn{
    height:30px;
    padding:13px 35px;
    font-size: 18px;
    color: #ffffff !important;
    margin:10px 0px;
}

http://jsfiddle.net/3L4vB/

Answer 1

一个元素是行内元素所以你必须添加 display:inline-block 到你的 .btn 类