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

将类.button保留为float，将所有按钮用另一个分区（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>

如何将水平按钮对齐？

2 个答案: