我试图模仿 Facebook 的主页以提高我的技能，但我很难尝试将用户名和密码框彼此完美对齐，这是它的样子:
我的 HTML:
<body>
<div id="top_banner">
<div id="header">
<h1>facebull</h1>
</div>
<div id="login_info">
<div id="username_group">
<label for="username_field">Email or Phone?</label>
<input type="text" id="username_field">
</div>
<div id="password_group">
<label for="password_field">Password</label>
<input type="text" id="password_field">
<label>Forgot account?</label>
</div>
</div>
</div>
我的 CSS:
*{
margin:0px;
padding:0px;
}
input, label{
display:block;
}
#top_banner{
background-color:#3b5998;
color: #fff;
width:100%;
height: 100px;
}
#header{
line-height: 100px;
position: absolute;
margin-left: 100px;
}
#password_group{
margin-left: 80%;
}
#username_group{
margin-left: 70%;
}
#container{
background-color: #e9ebee;
}
我已经尝试在#username_group 上使用 margin-top 和 line-height 但它不起作用。另外，有哪些方法可以提高我的代码效率？
最佳答案
在父级上使用 flexbox 来分隔部分(使用 justify-content: space-between)并垂直对齐它们，然后在登录/密码区域上使用 flex 来对齐和分隔这些元素。
* {
margin: 0px;
padding: 0px;
}
input,
label {
display: block;
}
#top_banner {
background-color: #3b5998;
color: #fff;
}
#container {
background-color: #e9ebee;
}
/* SO edits */
#top_banner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2em;
box-sizing: border-box;
}
#login_info {
display: flex;
padding: 1em;
}
#username_group {
margin-right: 1em;
}<div id="top_banner">
<div id="header">
<h1>facebull</h1>
</div>
<div id="login_info">
<div id="username_group">
<label for="username_field">Email or Phone?</label>
<input type="text" id="username_field">
</div>
<div id="password_group">
<label for="password_field">Password</label>
<input type="text" id="password_field">
<label>Forgot account?</label>
</div>
</div>
</div>关于html - 如何完美对齐 <div> 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41912361/