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; 
}