div右邊緣附近的位置超鏈接

Question

我有三個超鏈接，我想將它們放在div右邊緣附近。 這個div位於另一個div中，稱爲mainHeader。 以下是我有：

<div class="mainHeader"> 
<div id="Buttons"> 
<a href="#" class="myButton">New Customer</a> 
<a href="#" class="myButton2">Sign In</a><br /> 
<input type="text" /> 
<a href="#" class="myButton3">Go</a> 
</div> 
</div> 

和CSS是這樣一個至今：

.mainHeader 
{ 
    background: #b2b2b2; 
    height:60%; 
    margin-top:0px; 
    width:100%; 
} 

所以，我想所有的四個控件被放置在div「的右邊緣附近mainHeader 」。 前兩個鏈接myButton和myButton2應該在一行中，在它們下面應該有文本框和其他按鈕。 任何想法如何解決這個問題？ 由於提前，Laziale

Answer 1

我不知道這是否是最好的方式，但我只是改變與按鈕文本框的位置，然後添加direction:rtl; CSS規則的mainHeader類。

這裏是小提琴： http://jsfiddle.net/QHuv3/

如果您mainHeader格包裹的不僅僅是按鈕DIV更多，你不希望在它的direction:rtl; CSS規則，那麼你可以這樣做：

.mainHeader, #Buttons 
{ 
    background: #b2b2b2; 
    height:60%; 
    margin-top:0px; 
    width:100%; 
} 
#Buttons 
{ 
    direction:rtl; 
} 

HTML應該有文本框和按鈕的位置切換。

搗鼓第二種情況： http://jsfiddle.net/QHuv3/1/

Answer 2

這應該這樣做。你要改變寬度/利潤率相應http://jsfiddle.net/jalbertbowdenii/YYaP2/1/

Answer 3

這裏有一個 '更經典' 的解決方案（http://jsfiddle.net/vUzBg/）：

HTML：

<div class="mainHeader"> 
    <div id="Buttons"> 
     <div class="top"> 
      <a href="#" class="myButton">New Customer</a> 
      <a href="#" class="myButton2">Sign In</a> 
     </div> 
     <div class="bottom"> 
      <input type="text" /> 
      <a href="#" class="myButton3">Go</a> 
     </div> 
    </div> 
</div> 

CSS：

.mainHeader 
{ 
    background: #b2b2b2; 
    height:60%; 
    margin-top:0px; 
    width:100%; 
    overflow: auto; 
} 
.top, .bottom { 
    float: right; 
} 
.bottom { 
    clear: right; 
}