如何將水平按鈕對齊到右側？

我想製作一個簡單的面板，其中水平放置按鈕並將其對齊到右側。願意將其調整到左邊，我可以很容易地做到這一點像：如何將水平按鈕對齊到右側？

.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;。最後兩個對齊右側，但與'按鈕'重疊。

那我該怎麼做呢？

來源

2012-03-03 Patryk

可以去除漂浮，與物業text-align對準你的「按鈕」，以正確的容器。您不希望您的標題與右側對齊，因此您必須使用text-align: left;取消它。

還有一個問題：當你真正想要的是按鈕時，你正在使用非語義div。您應該使用... button元素（或者可能是input[type"button|image|submit"]）。這些是可以聚焦的，並且可以用於點擊時發生的動作（使用鼠標，鍵盤或水龍頭）。
回到這些div：它們默認顯示爲塊，您必須更改爲inline-block - IE8 +。

小提琴：http://jsfiddle.net/PhilippeVay/YZaRW/

來源

2012-03-03 23:27:56 FelipeAls

謝謝。 +1對於jsfiddle。真的很棒的網站:) – Patryk 2012-03-03 23:31:12

離開班級。按鈕與浮動左，包裝所有的按鈕與另一個部門（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>

來源

2012-03-03 23:27:08 multimediaxp

如何將水平按鈕對齊到右側？

回答

相關問題