Question

我想使用Flexbox创建登录表单，这也应该是响应式的。如何实现该设计，如模型图片所示？

＆＃13;

.wrapper {
    display: flex;
    flex-flow: row wrap;
    text-align: center;
    background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
    font-family: Arial;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div class="wrapper">
    <main class="main">
        <h2>Login</h2>
        <form method="POST" action="main.html">
            <label for="username"><b>Username:</b></label>
            <input id="username" type="text" placeholder="Username" required/><br/>
            <label for="password"><b>Password:</b></label>
            <input id="password" type="password" placeholder="Password" required/><br/>
            <input class="button" type="submit" value="Login"/><br/>
        </form>
    </main>
</div>
</body>
</html>

＆＃13;

UI-smaller than 400px UI-greater than 400px

Answer 1

您可以将CSS flexbox用于此类布局。请参阅代码段以获取示例：

.wrapper {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
  background: linear-gradient(to bottom, #F4F6F9, #D3D8E8);
  font-family: Arial;
  justify-content: center;
}

.main {
  justify-content: center;
  text-align: left;
}

.lgn-items {
  padding: 10px 0 10px;
}

.lgn-label {
  margin-right: 10px;
}

.button {
  width: 100px;
}

<body>
  <div class="wrapper">
    <main class="main">
      <form method="POST" action="main.html">
        <h2>Login</h2>
        <div class="lgn-items">
          <label class='lgn-label' for="username"><b>Username:</b></label>
          <input id="username" type="text" placeholder="Username" required/>
        </div>
        <div class="lgn-items">
          <label class='lgn-label' for="password"><b>Password:</b></label>
          <input id="password" type="password" placeholder="Password" required/>
        </div>
        <input class="button" type="submit" value="Login" />
      </form>
    </main>
  </div>
</body>

具有flexbox和响应式设计的公式

1 个答案: