Html 如何将水平按钮向右对齐？

我想做一个简单的面板，面板上的按钮水平放置并向右对齐。如果愿意将其与左侧对齐，我可以很容易地这样做：

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

。按钮{
浮动：左；
背景色：#55cc66；
右边距：50px；
填充物：5px；
}
//......
风格转换
违约
窄柱
大号印刷品

但是当我对float:right做同样的操作时，它显然会将其向右对齐，但顺序相反。我还尝试了

文本对齐：右

，

位置：绝对；右：150和
位置：固定；右：150。最后两个按钮向右对齐，但笨拙地重叠在“按钮”上

那么，我如何才能做到这一点呢？
离开课堂。按钮向左浮动，用另一个分区（btn_包装器）包装所有按钮，并为其添加特定的宽度，然后向右浮动。只要确保你所有的纽扣都装在包装里就行了

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

.btn\u包装器{
宽度：300px；
浮球：对
} 
风格转换
违约
窄柱
大号印刷品
您可以移除浮动，并将“按钮”的容器与属性
文本对齐
对齐。
您不希望标题向右对齐，因此必须使用
text align:left

还有一个问题：当您真正想要的是按钮时，您正在使用非语义的
div
。你应该使用<代码>按钮
元素（或者可能
输入[键入“按钮|图像|提交”]
）。
这些按钮是可聚焦的，用于单击（使用鼠标、键盘或轻触）时发生的动作。

回到这些
div
：默认情况下，它们显示为块，您必须更改为
内联块
-IE8+

小提琴：
谢谢+1代表JSFIDLE。非常棒的网站：）