Тру верстальщик

Ребят уделите пару минут ><

Вообщем я начал изучать css, и пока что всё успешно..
Но вот столкнулся с одной штучкой:
У меня блок встаёт не туда куда нужно(




Вот css:

Вот html

Суть вопроса:
Как мне переместить отдельный блок в горизонтальную полоску в css?
Вообщем на скрине понятно что требуется
Спасибо =)

float:left;

Дык если плавающим делать, то он вообще хер знает куда перемещается

Гибат мне сказал можно так сделать
display: inline-block;
Я так попробывал вроде всё хорошо =)

css:

Код:

ul.buttons {list-style:none;}
ul.buttons li {display:block; float:left; width:142px; height:50px;}

html:

Код:

<ul class="buttons">
<li>Кнопка 1</li>
<li>Кнопка 2</li>
<li>Кнопка 3</li>
<li>Кнопка 4</li>
<li>Кнопка 5</li>
</ul>

Так сейчас принято.

P.S http://twitter.github.com/bootstrap/ ознакомься, может что-нибудь почерпнешь для себя.

Пример в догонку - http://jsfiddle.net/Kenpachi/2tqqm/13/

Для этого используй теги выравнивания через атрибут style например: style = “text-align: center;”

Почему inline стили? И два блочных элемента в одну сроку таким образом не поставить.

Хоть на дату темы смотрите...