如何让我的登录表单自动对齐到右边？

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中。在text-align:right上添加topbar。然后为登录表单设置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：

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;
text-align: right;

}

login-form {

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

}