div의 오른쪽 가장자리 근처에 위치 하이퍼 링크

Question

세 개의 하이퍼 링크가 있는데 div의 오른쪽 가장자리 근처에 배치하려고합니다. 이 div는 mainHeader라고하는 다른 div 내에 배치됩니다.

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

그래서, 내가 모든 네 개의 컨트롤 사업부 '의 오른쪽 가장자리 근처에 위치해야 할 mainHeader '. 처음 두 개의 링크 인 myButton과 myButton2는 한 행에 있어야하며 그 아래에는 텍스트 상자와 다른 버튼이 있어야합니다. 어떻게하면 해결할 수 있습니까? 이것이 가장 좋은 방법은 사전에 감사합니다, Laziale의

Answer 1

는 잘 모르겠지만, 그냥 버튼으로 텍스트 상자의 위치를 ​​변경 한 후 mainHeader 클래스에 direction:rtl; CSS 규칙을 추가했습니다. 당신의 mainHeader div에 그냥 버튼 DIV보다 더 랩 당신이 그것을에서 direction:rtl; CSS 규칙을 원하지 않는 http://jsfiddle.net/QHuv3/

경우에, 당신이 할 수 있습니다 :

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

을 여기

는 바이올린입니다

HTML에는 텍스트 상자와 버튼 장소가 전환되어야합니다. 두 번째 경우에

바이올린 : http://jsfiddle.net/QHuv3/1/

Answer 2

이 그것을해야한다.

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 : 당신은 그에 따라 폭/마진 http://jsfiddle.net/jalbertbowdenii/YYaP2/1/

Answer 3

여기에 '더 클래식'솔루션 (http://jsfiddle.net/vUzBg/)입니다 변경할 수 있습니다

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