定位div类

问题描述：

我正在设计Facebook登录页面为练习。仅使用html和css.My问题是我想要定位.username，.password，submitButton类并排（如原始）。但该CSS不起作用。这里是我的html代码定位div类

   <!DOCTYPE HTML> 
      <html lang="en-US"> 
      <head> 
       <meta charset="UTF-8"> 
       <title>Facebook- Log In or Sign Up</title> 
       <link rel="stylesheet" type="text/css" href="style.css" media="all"/> 
      </head> 
      <body> 
       <header class="mainHeader"> 
        <div class="mainArea"> 
         <div class="logoArea"> 
         <img src="media/6cVHHozUQSt.png" alt=""/> 
         </div> 
         <div class="loginArea"> 
         <form action="#"> 
         <div class="userName"> 
         <label for="user">Email or Phone </label> <br/> 
          <input type="text" id="user"/><br/> 
          <input type="checkbox" id="keepLogin"/> 
          <label for="keepLogin"> Keep me Logged In</label> 
         </div> 
         <div class="password"> 
         <label for="password">Password </label> 
          <input type="password" id="password"/> 
          <a href="#">Forgotten you password?</a> 
         </div> 
         <div class="submitButton"> 
          <input type="submit" value="Log In"/> 
         </div> 
         </form> 
         </div> 
        </div> 
       </header> 
      </body> 
      </html>

这里是CSS

   body{ 
       margin:0; 
       padding:0; 
      } 

      header.mainHeader:after{ 
       content:""; 
       display: block; 
       clear: both; 
      } 
      header.mainHeader{ 
       background:#3a5797; 
      } 
      .mainHeader .logoArea{ 
       width: 50%; 
       float: left; 
      } 
      .mainHeader .loginArea{ 
       float:right; 
       width:50%; 
      } 
      .loginArea .username, .loginArea .password{ 
       width: 40%; 
       float: left; 
      } 
      .loginArea .submitButton{ 
       width: 20%; 
       float: left; 
      }

你尝试的位置：相对和如果没有工作，显示：内联块与位置：相对？ – ReadyFreddy

答

适用浮动：左.userName和休息对准。密码一{显示：块;} .submitButton {保证金： 16px的0}

答

问题是不区分大小写使用.userName代替.username

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header.mainHeader:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
header.mainHeader { 
 
    background: #3a5797; 
 
} 
 

 
.mainHeader .logoArea { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.mainHeader .loginArea { 
 
    float: right; 
 
    width: 50%; 
 
} 
 

 
.loginArea .userName, 
 
.loginArea .password { 
 
    width: 40%; 
 
    float: left; 
 
} 
 

 
.loginArea .submitButton { 
 
    width: 20%; 
 
    float: left; 
 
}

<html lang="en-US"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Facebook- Log In or Sign Up</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css" media="all" /> 
 
</head> 
 

 
<body> 
 
    <header class="mainHeader"> 
 
    <div class="mainArea"> 
 
     <div class="logoArea"> 
 
     <img src="media/6cVHHozUQSt.png" alt="" /> 
 
     </div> 
 
     <div class="loginArea"> 
 
     <form action="#"> 
 
      <div class="userName"> 
 
      <label for="user">Email or Phone </label> <br/> 
 
      <input type="text" id="user" /><br/> 
 
      <input type="checkbox" id="keepLogin" /> 
 
      <label for="keepLogin"> Keep me Logged In</label> 
 
      </div> 
 
      <div class="password"> 
 
      <label for="password">Password </label> 
 
      <input type="password" id="password" /> 
 
      <a href="#">Forgotten you password?</a> 
 
      </div> 
 
      <div class="submitButton"> 
 
      <input type="submit" value="Log In" /> 
 
      </div> 
 
     </form> 
 
     </div> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

谢谢FıratAbak的帮助。是否有任何方法检查在线大小写？像验证？ –

不，我找不到任何在线验证服务 –

答

在你的CSS，这条线

.loginArea .username,

应该

.loginArea .userName,

感谢玛丽的帮助。是否有任何方法来检查在线大小写？像验证？ –

不是我所知道的。如果您保持浏览器检查器处于打开状态，则可以看到您的CSS何时未得到应用，然后您可以检查拼写。 – Mary

答

在这里，你必须使用CSS显示属性的例子：

012 ！

.paral { 
 
    display: inline-block; 
 
}

<div class="logoArea"> 
 
    <img src="media/6cVHHozUQSt.png" alt=""/> 
 
</div> 
 
<div class="loginArea"> 
 
    <form action="#"> 
 
    <div class="paral"> 
 
     <label for="user">Email or Phone </label> <br/> 
 
     <input type="text" id="user"/><br/> 
 
    </div> 
 
    <div class="paral"> 
 
     <label for="password">Password </label> <br/> 
 
     <input type="password" id="password"/> <br /> 
 
    </div> 
 
    <div class="paral"> 
 
     <input type="submit" value="Log In"/> 
 
    </div> 
 
    </form> 
 
</div>

答

1用户名=用户名 2 - 输入宽度不够 3-不要在表单中使用<br>

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
header.mainHeader:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
header.mainHeader { 
 
    background: #3a5797; 
 
} 
 

 
.mainHeader .logoArea { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.mainHeader .loginArea { 
 
    float: right; 
 
    width: 50%; 
 
} 
 

 
.loginArea .userName, 
 
.loginArea .password { 
 
    width: 45%; 
 
    float: left; 
 
} 
 

 
.loginArea .submitButton { 
 
    width: 10%; 
 
    float: left; 
 
}

<header class="mainHeader"> 
 
    <form action="#"> 
 
    <div class="mainArea"> 
 
     <div class="logoArea"> 
 
     <img src="media/6cVHHozUQSt.png" alt="" /> 
 
     </div> 
 
     <div class="loginArea"> 
 
     <div class="userName"> 
 
      <label for="user">Email or Phone </label> 
 
      <input type="text" id="user" name="user" /> 
 
     </div> 
 
     <div class="password"> 
 
      <label for="password">Password </label> 
 
      <input type="password" id="password" /> 
 

 
     </div> 
 
     <div class="submitButton"> 
 
      <input type="submit" value="Log In" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="mainArea2"> 
 
     <label for="keepLogin"> Keep me Logged In</label> 
 
     <input type="checkbox" id="keepLogin" /> 
 
    </div> 
 
    </form> 
 
</header>

相关推荐