Question

我正在为实践设计facebook登录页面。仅使用html和css。我的问题是我想要并排定位.username，.password，submitButton类（就像原版一样）。但是css没有用。这是我的HTML代码

                <!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;
            }

Answer 1

将float：left应用于.userName并进行休息对齐 .password a {display：block;} .submitButton {margin：16px 0}

Answer 2

问题是不区分大小写使用.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>

Answer 3

在你的css中，这一行

.loginArea .username,

应该是

.loginArea .userName,

Answer 4

这里有一个使用CSS显示属性的例子：

＆＃13;

.paral {
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

Answer 5

1- username！= userName 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>

定位div类

5 个答案: