如何讓我的登錄表單自動對齊到右側？

Question

我有一個頂部菜單欄上有一個登錄窗體。登錄表單一直在左側，但移動了大約300px。如何獲取它，以便登錄表單自動調整到右側，並在調整窗口大小時進行調整？下面是代碼我現在所擁有的：

#topbar { 
    height: 40px; 
    width: 100%; 
    opacity: 0.5; 
    background-color: #336680; 
    box-shadow: 0.1em 0.1em 0.1em; 
    position: absolute; 
    top: 0; 
    left: 0; 
    padding: 0; 
} 

#login-form { 
    min-width: 520px; 
    top: 0.3em; 
    position: absolute; 
    z-index: 2; 
} 

哦，這裏是我對本節中的HTML：

<form id="login-form" action="action"> 
    <div> 
    <input type="email" id="login-email" /> 
    <input type="password" id="login-password" /> 
    <input type="submit" class= "btn btn-info" id="login-button" value="Sign in" /> 
    </div> 
</form> 

<div id="topbar"> 
</div> 

Answer 1

把你的形式topbar內。在topbar上添加text-align:right。然後設置登錄表單的寬度爲100%。

Fiddle

或者你可以使用right還有：

#login-form { 
    top: 0.3em; 
    right: 0.3em; 
    position: absolute; 
} 

Fiddle

或者float: right，它給你：

Fiddle

HTML：

<div id="topbar"> 
    <form id="login-form" action="action"> 
     <div> 
      <input type="email" id="login-email" /> 
      <input type="password" id="login-password" /> 
      <input type="submit" class="btn btn-info" id="login-button" value="Sign in" /> 
     </div> 
    </form> 
</div> 

CSS：

頂欄{

height: 40px; 
width: 100%; 
opacity: 0.5; 
background-color: #336680; 
box-shadow: 0.1em 0.1em 0.1em; 
position: absolute; 
top: 0; 
left: 0; 
padding: 0; 
text-align: right; 

}

與登錄表單{

width: 100%; 
top: 0.3em; 
position: absolute; 
z-index: 2; 

}