我有一个顶部菜单栏,上面有登录表单。登录表单一直在左侧,但移动大约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>
答案 0 :(得分:1)
将表单放在topbar
中。在text-align:right
上添加topbar
。然后为登录表单设置100%
宽度。
或者您也可以使用right
:
#login-form {
top: 0.3em;
right: 0.3em;
position: absolute;
}
或float: right
,由您决定:
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;
}