0

我正在设计用于练习的 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;
            }
4

5 回答 5

0

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>

于 2017-03-16T09:28:33.960 回答
0

将 float:left 应用于 .userName 并用于其余对齐 .password a {display: block;} .submitButton {margin: 16px 0}

于 2017-03-16T08:48:57.350 回答
0

在你的 CSS 中，这一行

.loginArea .username,

应该

.loginArea .userName,

于 2017-03-16T08:50:37.193 回答
0

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

.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-16T09:08:01.040 回答
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>

于 2017-03-16T08:49:04.623 回答