Как выровнять горизонтальные кнопки вправо?

Question

Я хотел бы сделать простую панель с кнопками, которые расположены горизонтально и выровнены вправо.Желая выровнять его по левому краю, я легко могу сделать это следующим образом:

.button {
    float:left;
    background-color: #55cc66;
    margin-right: 50px;
    padding: 5px;
}
//......
    <div id="switcher">
        <h3>Style Switcher</h3>
        <div class="button selected" id="switcher-default">
        Default
        </div>
        <div class="button" id="switcher-narrow">
        Narrow Column
        </div>
        <div class="button" id="switcher-large">
        Large Print
        </div>
    </div>

Но когда я делаю то же самое с float:right, оно, очевидно, выравнивает его вправо, но в перевернутом порядке.Я также пробовал text-align: right, position: absolute; right:150; и position: fixed; right:150;.Последние два выравниваются вправо, но неловко перекрывают «кнопки».

Как мне тогда добиться этого?

Answer 1

Вы можете удалить поплавки и выровнять контейнер ваших «кнопок» вправо со свойством text-align. Вы не хотите, чтобы ваш заголовок был выровнен вправо, поэтому вы должны отменить его с помощью text-align: left;.

Остается одна проблема: вы используете несемантическую div, когда вам действительно нужны кнопки. Вы должны использовать ... button элементов (или, может быть, input[type"button|image|submit"]). Они фокусируются и предназначены для действия, которое происходит при нажатии (с помощью мыши, клавиатуры или касания).
Вернемся к этим div: по умолчанию они отображаются как блоки, вам нужно поменять на inline-block - IE8 +.

Скрипка: http://jsfiddle.net/PhilippeVay/YZaRW/

Answer 2

Оставьте кнопку класса .bat с плавающей точкой влево, оберните все свои кнопки другим делением (btn_wrapper) и добавьте к нему определенную ширину и поплавок вправоПросто убедитесь, что все ваши кнопки находятся внутри оболочки

.btn_wrapper{
width:300px;
float:right
} 

<div id="switcher">
        <h3>Style Switcher</h3>
<div class="btn_wrapper">        
<div class="button selected" id="switcher-default">
        Default
        </div>
        <div class="button" id="switcher-narrow">
        Narrow Column
        </div>
        <div class="button" id="switcher-large">
        Large Print
        </div>
</div>
    </div>