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

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 +.

Fiddle: http://jsfiddle.net/PhilippeVay/YZaRW/

Answer 2

Оставьте класс .button с поплавком влево, оберните все ваши кнопки другим подразделением (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>