如何将水平按钮右对齐？

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;。最后两个可以对齐到右侧，但是它们会尴尬地重叠在“按钮”上。

那么我该怎么做呢？

- Patryk

Answer 1

您可以使用属性text-align将您的“按钮”容器取消浮动并对齐到右侧。 您不希望您的标题靠右对齐，因此您必须使用text-align: left;取消它。

仍然存在一个问题：当您实际需要的是按钮时，您正在使用非语义性div。您应该使用...button元素（或者可能是input[type"button|image|submit"]）。 这些元素可以聚焦，并且在单击（使用鼠标、键盘或轻触）时进行操作。
回到这些div：它们默认显示为块，您必须更改为inline-block - IE8+。

演示：http://jsfiddle.net/PhilippeVay/YZaRW/

- FelipeAls

---

谢谢。+1 给 jsfiddle。真是个很棒的网站 :) - Patryk

Answer 2

将类名为.button的元素设置为左浮动，将所有按钮包裹在另一个div（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>

- multimediaxp