CSS内联输入

时间：2018-12-22 14:36:42

标签： html5 css3

我正在尝试创建响应式注册表。框将位于中间，输入将创建两个类似

的输入 
Input    Input 
Input    Input

代码： 

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ff0;
}

.login {
  text-align: center;
  width: 350x;
  box-sizing: border-box;
  padding: 40px;
  background-color: white;
}

.login h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 30px;
  text-transform: uppercase;
}

.login .input-group {
  position: relative;
  width: 100%;
  margin-bottom: 25px;
}

.login .input-group input {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 18px;
  outline: none;
  border: 1px solid #000;
}

.login .input-group span {
  position: absolute;
  top: 12px;
  left: 20px;
  padding: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  pointer-events: none;
  background: #fff;
  text-transform: uppercase;
}

.login .input-group input:focus~span,
.login .input-group input:valid~span {
  top: -10px;
  left: 10px;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #000;
  background: #ff0;
}

.login .input-group input[type="submit"] {
  background: #ff0;
  border: none;
  box-shadow: none;
  text-transform: uppser;
  cursor: pointer;
  font-weight: 600;
}

.login .input-group input[type="submit"]:hover {
  background: #ffc107;
}

.login a {
  color: #262626;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #666666;
}

.login a span {
  color: #262626;
  font-weight: 600;
}
<!DOCTYPE html>
<html>



<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
  <div class="login">
    <h2>
      Sign in
    </h2>
    <form>
      <div class="input-group">
        <input size="10" type="text" name="" required="required">
        <span>Username</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Organization Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Confirm Password</span>
      </div>


      <!-- Starts the Second Part -->

      <div class="input-group">
        <input type="text" name="" required="required">
        <span>First Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Last Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Phone Number</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Affiliation</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Email</span>
      </div>








      <div class="input-group">
        <input type="submit" value="Login">
      </div>
    </form>
    <a href="#">Forgot Password <span>Click Here</span> </a>

  </div>
</body>

</html>

CodePen Demo

我不知道为什么不能同时进行输入。任何帮助将不胜感激。

3 个答案:

答案 0 :(得分：2)

另一种简单的方法是通过在容器中添加column-count: 2来使用列，

.login form {
  column-count: 2;
}


body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ff0;
}

.login {
  text-align: center;
  width: 350x;
  box-sizing: border-box;
  padding: 40px;
  background-color: white;
}
.login form {
  column-count: 2;
}
.login h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 30px;
  text-transform: uppercase;
}

.login .input-group {
  position: relative;
  width: 100%;
  margin-bottom: 25px;
}

.login .input-group input {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 18px;
  outline: none;
  border: 1px solid #000;
}

.login .input-group span {
  position: absolute;
  top: 12px;
  left: 20px;
  padding: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  pointer-events: none;
  background: #fff;
  text-transform: uppercase;
}

.login .input-group input:focus~span,
.login .input-group input:valid~span {
  top: -10px;
  left: 10px;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #000;
  background: #ff0;
}

.login .input-group input[type="submit"] {
  background: #ff0;
  border: none;
  box-shadow: none;
  text-transform: uppser;
  cursor: pointer;
  font-weight: 600;
}

.login .input-group input[type="submit"]:hover {
  background: #ffc107;
}

.login a {
  color: #262626;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #666666;
}

.login a span {
  color: #262626;
  font-weight: 600;
}
<!DOCTYPE html>
<html>



<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
  <div class="login">
    <h2>
      Sign in
    </h2>
    <form>
      <div class="input-group">
        <input size="10" type="text" name="" required="required">
        <span>Username</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Organization Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Confirm Password</span>
      </div>


      <!-- Starts the Second Part -->

      <div class="input-group">
        <input type="text" name="" required="required">
        <span>First Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Last Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Phone Number</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Affiliation</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Email</span>
      </div>








      <div class="input-group">
        <input type="submit" value="Login">
      </div>
    </form>
    <a href="#">Forgot Password <span>Click Here</span> </a>

  </div>
</body>

</html>

答案 1 :(得分：0)

使用Flexbox并将输入组的flex-basis设置为50%。

/* Add */

form {
  display: flex; 
  flex-wrap: wrap; 
  justify-content: space-between; 
}

.login .input-group {
  flex-basis: 45%;
}


body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #ff0;
}

.login {
  text-align: center;
  width: 550px;
  box-sizing: border-box;
  padding: 40px;
  background-color: white;
}

.login h2 {
  margin: 0 0 20px;
  padding: 0;
  font-size: 30px;
  text-transform: uppercase;
}

.login .input-group {
  position: relative;
  flex-basis: 45%;
  margin-bottom: 25px;
}

.login .input-group input {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 18px;
  outline: none;
  border: 1px solid #000;
}

.login .input-group span {
  position: absolute;
  top: 12px;
  left: 20px;
  padding: 0;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -ms-transition: 0.5s;
  -o-transition: 0.5s;
  pointer-events: none;
  background: #fff;
  text-transform: uppercase;
}

.login .input-group input:focus~span,
.login .input-group input:valid~span {
  top: -10px;
  left: 10px;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid #000;
  background: #ff0;
}

.login .input-group input[type="submit"] {
  background: #ff0;
  border: none;
  box-shadow: none;
  text-transform: uppser;
  cursor: pointer;
  font-weight: 600;
}

.login .input-group input[type="submit"]:hover {
  background: #ffc107;
}

.login a {
  color: #262626;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #666666;
}

.login a span {
  color: #262626;
  font-weight: 600;
}

form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
<!DOCTYPE html>
<html>



<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>

<body>
  <div class="login">
    <h2>
      Sign in
    </h2>
    <form>
      <div class="input-group">
        <input size="10" type="text" name="" required="required">
        <span>Username</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Organization Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Password</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Confirm Password</span>
      </div>


      <!-- Starts the Second Part -->

      <div class="input-group">
        <input type="text" name="" required="required">
        <span>First Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Last Name</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Phone Number</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Affiliation</span>
      </div>
      <div class="input-group">
        <input type="text" name="" required="required">
        <span>Email</span>
      </div>








      <div class="input-group">
        <input type="submit" value="Login">
      </div>
    </form>
    <a href="#">Forgot Password <span>Click Here</span> </a>

  </div>
</body>

</html>

答案 2 :(得分：0)

如果您熟悉并能够使用引导程序，也许可以将其插入表单。

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<form>
  <div class="row">
    <div class="col">
      <span>Username</span>
      <input id="userName" type="text" class="form-control" placeholder="Username" required>
    </div>
    <div class="col">
      <span >Orginization Password</span>
      <input type="password" class="form-control" placeholder="Orginization Password" required>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >Password</span>
      <input type="password" class="form-control" placeholder="Password" required>
    </div>
    <div class="col">
      <span for="userName">Confirm Passsword</span>
      <input type="password" class="form-control" placeholder="Confirm Password" required>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >First Name</span>
      <input type="text" class="form-control" placeholder="First Name" required>
    </div>
    <div class="col">
      <span>Last Name</span>
      <input type="text" class="form-control" placeholder="Last Name" required>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >Phone Number</span>
      <input type="tel" class="form-control" placeholder="XXX-XXX-XXXX" required>
    </div>
    <div class="col">
      <span>Affiliation</span>
      <input type="Text" class="form-control" placeholder="Affiliation">
    </div>
  </div>
  <div class="row">
    <div class="col">
      <span >Email</span>
      <input type="email" class="form-control" placeholder="Email" required>
    </div>
  </div>
</form>

相关问题
最新问题