浮动按钮

Question

我正在尝试制作一个简单的浮动按钮标记。堆叠时我遇到了一些问题，但我不知道究竟是什么原因造成的，只是它与＆＃34; a＆＃34;某种方式的元素。

为简洁起见，我在此处省略了href属性。

＆＃13;

＆＃13;

.fbutton {
  display: block;
  float: left;
  width: 150px;
  background: #3C0;
  line-height: 60px;
  border-radius: 10px 10px 10px 10px;
  text-align: center;	
}

＆＃13;

<a class="fbutton">Our review</a>
<a class="fbutton">All Features</a>
<a class="fbutton">Free Version</a>
<a class="fbutton">Full version</a>

＆＃13;

＆＃13;

＆＃13;

这就是它现在的样子。

我期待它处于一个直线上。如果我使用div元素一切正常，但我想将代码保持在最低限度。有什么建议吗？

Answer 1

这对我有用：http://jsfiddle.net/hshgjcjg/1/

<强> HTML

<a class="fbutton">Our review</a>
<a class="fbutton">All Features</a>
<a class="fbutton">Free Version</a>
<a class="fbutton">Full version</a>

<强> CSS

.fbutton {
    display: block;
    float: left;
    width: 150px;
    background: #3C0;
    line-height: 60px;
    border-radius: 10px 10px 10px 10px;
    text-align: center; 
    margin-right: 20px;
    color: #fff;
    font-weight: bold;
}