html - 如何让我的登录表单自动右对齐？

Question

我有一个顶部菜单栏，上面有一个登录表单。登录表单一直在左侧，但移动了大约 300 像素。我怎样才能让登录表单自动向右对齐并在您调整窗口大小时进行调整？这是我现在拥有的代码:

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