Плавающие кнопки

Question

Я пытаюсь сделать простую разметку кнопок. У меня есть какая-то проблема с укладкой, но я не знаю, что именно вызывает это, только потому, что она как-то связана с «а».

Я опустил href атрибут только здесь для краткости.

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

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

Это то, что она выглядит сейчас.

Я ожидал, что это будет в staright линии. Если я использую элементы 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; 
}