时间戳

首页 > 解决方案 > 如何在我的登录页面上修复此设计错误？

html - 如何在我的登录页面上修复此设计错误？

问题描述

我正在尝试修复登录页面所面临的设计错误。

我一直在尝试将用户名和密码表单输入字段居中，但它不起作用。该图标也未与用户名和密码字段对齐。

我曾尝试更改 CSS，但它不会居中。

以下是我的 HTML 和 CSS 代码：

body {
  margin: 0;
  padding: 0;
  font-family: 'Corbel', sans-serif;
  color: #FFFFFF
}

/*CSS for login.html & signup.html*/
#login-container {
  background-color: #FFFFFF;
  position: relative;
  top: 15%;
  margin: auto;
  width: 340px;
  height: 445px;
  text-align: center;
}

#login-container-title {
  position: relative;
  background-color: #FFAE42;
  width: 100%;
  padding: 20px 0px;
  font-size: 22px;
  font-weight: bold;
}

#register-container {
  background-color: #FFFFFF;
  position: relative;
  top: 15%;
  margin: auto;
  width: 340px;
  height: 500px;
  text-align: center;
}

#register-container-title {
  position: relative;
  background-color: #FFAE42;
  width: 100%;
  padding: 20px 0px;
  font-size: 22px;
  font-weight: bold;
}

.register {
  margin: auto;
  padding: 16px 0;
  text-align: center;
  margin-top: 30px;
  width: 85%;
  border-top: 1px solid #696969;
}

#register-link {
  margin-top: 15px;
  padding: 15px 35px;
  background: #FFAE42;
  color: #FFFFFF;
  font-size: 15;
  font-weight: bold;
  border: 0 none;
  cursor: pointer;
  border-radius: 3px;
}

#register-required {
  margin: auto;
  width: 260px;
  background-color: #ededed;
  padding: 8px 0px;
  color: black;
  margin-top: 25px;
}
}

.input {
  margin: auto;
  width: 260px;
  background-color: #ededed;
  padding: 8px 0px;
  margin-top: 25px;
}

.input-addon {
  position: relative;
  top: -2px;
  float: left;
  background-color: #ededed;
  border: 1px solid #ededed;
  padding: 4px 8px;
  color: #757575;
  border-right: 1px solid #757575;
}

input[type=checkbox] {
  cursor: pointer;
}

input[type=text] {
  color: #696969;
  margin: 0;
  background-color: #ededed;
  font-size: 15;
  border: 1px solid #ededed;
  padding: 6px 0px;
}

input[type=password] {
  color: #696969;
  margin: 0;
  background-color: #ededed;
  font-size: 15;
  border: 1px solid #ededed;
  padding: 6px 0px;
}

/*to remove blue block while in focus */
*:focus {
  outline: none;
}

input[type=submit] {
  padding: 15px 35px;
  background: #FFAE42;
  color: #FFFFFF;
  font-size: 15;
  font-weight: bold;
  border: 0 none;
  cursor: pointer;
  margin-top: 35px;
}

/*CSS for main.html*/
.sidebar {
  margin: auto;
  padding: 0px;
  width: 200px;
  background-color: #FFFFFF;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #FFAE42;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.content {
  margin-left: 250px;
  padding: 30px 16px;
  height: 100%;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }

  .sidebar a {
    float: left;
  }

  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

/* Alert message box */
/* The alert message box */
.alert {
  padding: 5px;
  background-color: green;
  color: white;
  margin-bottom: 15px;
}
<html>

<head>
    <meta charset="UTF-8">
    <title>Phisherman - Login</title>
    <meta name="description" content="Phisherman - Login/Register">
    <!--Meta name=viewport for mobile phone scaling-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        body {
            background-image: url('backgroundimg.png');
        }
    </style>

</head>

<body>


    <div id="login-container">
        <div id="login-container-title">
            Login
        </div>

        <form method ="POST" action="auth.php">

            <div class="input">
                <div class="input-addon">
                    <i class="material-icons">face</i>
                </div>
                <input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
            </div>

            <div class="input">
                <div class="input-addon">
                    <i class="material-icons">vpn_key</i>
                </div>
                <input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
            </div>

            <input type="submit" name="submit" value="Log In" />
        </form>

        <div class="register">
            <span style="color: #657575">Don't have an account yet?</span>
            <a href="signup.html"><button id="register-link">Register here</button></a>
        </div>
      </div>

    </div>
</body>

</html>

标签： htmlcssformsauthentication

解决方案

利用flexbox

body {
  margin: 0;
  padding: 0;
  font-family: 'Corbel', sans-serif;
  color: #FFFFFF
}

/*CSS for login.html & signup.html*/
#login-container {
  background-color: #FFFFFF;
  position: relative;
  top: 15%;
  margin: auto;
  width: 340px;
  height: 445px;
  text-align: center;
}

#login-container form {
  display: flex;
  flex-flow: column wrap;
}

#login-container-title {
  position: relative;
  background-color: #FFAE42;
  width: 100%;
  padding: 20px 0px;
  font-size: 22px;
  font-weight: bold;
}

#register-container {
  background-color: #FFFFFF;
  position: relative;
  top: 15%;
  margin: auto;
  width: 340px;
  height: 500px;
  text-align: center;
}

#register-container-title {
  position: relative;
  background-color: #FFAE42;
  width: 100%;
  padding: 20px 0px;
  font-size: 22px;
  font-weight: bold;
}

.register {
  margin: auto;
  padding: 16px 0;
  text-align: center;
  margin-top: 30px;
  width: 85%;
  border-top: 1px solid #696969;
}

#register-link {
  margin-top: 15px;
  padding: 15px 35px;
  background: #FFAE42;
  color: #FFFFFF;
  font-size: 15;
  font-weight: bold;
  border: 0 none;
  cursor: pointer;
  border-radius: 3px;
}

#register-required {
  margin: auto;
  width: 260px;
  background-color: #ededed;
  padding: 8px 0px;
  color: black;
  margin-top: 25px;
}

.input {
  display: flex;
  justify-content: center;
  background-color: #ededed;
  padding: 8px 0px;
  margin: 25px auto 0;
  width: 100%;
}

.input-addon {
  position: relative;
  top: 0;
  float: left;
  background-color: #ededed;
  border: 1px solid #ededed;
  padding: 6px 10px;
  color: #757575;
  border-right: 1px solid #757575;
  margin-right: auto;
}

input[type=checkbox] {
  cursor: pointer;
}

input[type=text] {
  color: #696969;
  margin: 0;
  background-color: #ededed;
  font-size: 15px;
  border: 1px solid #ededed;
  padding: 10px;
  width: 100%;
}

input[type=password] {
  color: #696969;
  margin: 0;
  background-color: #ededed;
  font-size: 15px;
  border: 1px solid #ededed;
  padding: 10px;
  width: 100%;
}

/*to remove blue block while in focus */
*:focus {
  outline: none;
}

input[type=submit] {
  padding: 15px 35px;
  background: #FFAE42;
  color: #FFFFFF;
  font-size: 15;
  font-weight: bold;
  border: 0 none;
  cursor: pointer;
  margin-top: 35px;
}

/*CSS for main.html*/
.sidebar {
  margin: auto;
  padding: 0px;
  width: 200px;
  background-color: #FFFFFF;
  position: fixed;
  height: 100%;
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

.sidebar a.active {
  background-color: #FFAE42;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

.content {
  margin-left: 250px;
  padding: 30px 16px;
  height: 100%;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
  }

  .sidebar a {
    float: left;
  }

  div.content {
    margin-left: 0;
  }
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

/* Alert message box */
/* The alert message box */
.alert {
  padding: 5px;
  background-color: green;
  color: white;
  margin-bottom: 15px;
}
<html>

  <head>
    <meta charset="UTF-8">
    <title>Phisherman - Login</title>
    <meta name="description" content="Phisherman - Login/Register">
    <!--Meta name=viewport for mobile phone scaling-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
      body {
        background-image: url('backgroundimg.png');
      }

    </style>

  </head>

  <body>


    <div id="login-container">
      <div id="login-container-title">
        Login
      </div>

      <form method="POST" action="auth.php">

        <div class="input">
          <div class="input-addon">
            <i class="material-icons">face</i>
          </div>
          <input id="username" name="username" placeholder="Username" type="text" required class="validate" autocomplete="off">
        </div>

        <div class="input">
          <div class="input-addon">
            <i class="material-icons">vpn_key</i>
          </div>
          <input id="password" name="password" placeholder="Password" type="password" required class="validate" autocomplete="off">
        </div>

        <input type="submit" name="submit" value="Log In" />
      </form>

      <div class="register">
        <span style="color: #657575">Don't have an account yet?</span>
        <a href="signup.html"><button id="register-link">Register here</button></a>
      </div>
    </div>

    </div>
  </body>

</html>

推荐阅读