Question

我正在尝试模仿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 and line-height但它不起作用。另外，有什么方法可以让我的代码更有效率？

Answer 1

在父级上使用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>

Answer 2

您可以为您添加'float：right'#username_group和#password_group。这个

Answer 3

您应该查看“float”，而不是使用保证金来移动div

#password_group{
    margin-left: 80%;
}

#username_group{
     margin-left: 70%;
}

用

替换它

#login_info div {
  float: left;
}

然后你可以将#login_info与浮动等对齐

如何完美地对齐<div>元素？

3 个答案: