定位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; 
      }

來源

2017-03-16 Imrul Kayes

你嘗試的位置：相對和如果沒有工作，顯示：內聯塊與位置：相對？ – ReadyFreddy

適用浮動：左.userName和休息對準。密碼一{顯示：塊;} .submitButton {保證金： 16px的0}

來源

2017-03-16 08:48:57 user1705314

問題是不區分大小寫使用.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>

來源

2017-03-16 08:49:04

謝謝FıratAbak的幫助。是否有任何方法檢查在線大小寫？像驗證？ –

不，我找不到任何在線驗證服務 –

在你的CSS，這條線

.loginArea .username,

應該

.loginArea .userName,

來源

2017-03-16 08:50:37 Mary

感謝瑪麗的幫助。是否有任何方法來檢查在線大小寫？像驗證？ –

不是我所知道的。如果您保持瀏覽器檢查器處於打開狀態，則可以看到您的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>

來源

2017-03-16 09:08:01

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>

來源

2017-03-16 09:28:33

回答

相關問題