Question

如您所见，有6个输入框。我想知道如何将它们分成两组：左边3个，右边3个。

＆＃13;

edQntity.getTag()

＆＃13;

body {
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
body ::-webkit-input-placeholder {
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}
body :-moz-placeholder {
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body ::-moz-placeholder {
  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  opacity: 1;
  font-weight: 300;
}
body :-ms-input-placeholder {

  font-family: 'Source Sans Pro', sans-serif;
  color: white;
  font-weight: 300;
}

.wrapper {
  background: dimgrey;
  position: absolute;
  top: 25%;
  left: 0;
  width: 100%;
  height: 1000px;
  margin-top: -200px;
}

.wrapper.form-success .container h1 {
  -webkit-transform: translateY(85px);
          transform: translateY(85px);
}

.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 80px 0;
  height: 400px;
  text-align: center;
}

.container h1 {
  font-size: 40px;
  font-weight: 200;
}

form {
  padding: 20px 0;
  position: relative;
  z-index: 2;
}

form input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: 0;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.2);
  width: 250px;
  border-radius: 3px;
  padding: 10px 15px;
  margin: 0 auto 10px auto;
  display: block;
  font-size: 18px;
  color: white;
  -webkit-transition-duration: 0.25s;
          transition-duration: 0.25s;
  font-weight: 300;
}
form input:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
  background-color: white;
  width: 300px;
  color: #807e80;
}
form button {
  outline: 0;
  background-color: white;
  border: 0;
  padding: 10px 15px;
  color: #3a3c3d;
  border-radius: 4px;
  width: 250px;
  cursor: pointer;
  font-size: 22px;
}
form button:hover {
  background-color: #f5f7f9;
}

@-webkit-keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}
@keyframes square {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-700px) rotate(600deg);
            transform: translateY(-700px) rotate(600deg);
  }
}

＆＃13;

Answer 1

更新您的HTML以使用表格：

<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="body register.css"/>
</head>

<body>
<div class="wrapper">
    <div class="container">
        <h1>Welcome</h1>        
        <form class="form">
          <table>
            <tr><td><input type="text" placeholder="name"></td>
            <td><input type="contact" placeholder="contact number"></td>


            </tr>
            <tr><td><input type="add" placeholder="Country"></td>
            <td><input type="Bday" placeholder="Birthday"></td>


            </tr>
          <tr>

            <td><input type="Age" placeholder="Age"></td>
            <td>
            <input type="pin" placeholder="Pin number"></td>


           </tr>
           </table>
            <button type="submit" id="sign">Sign-up</button>
        </form>
    </div>
</div>

请参阅此CodePen

Answer 2

这样的事情怎么样？只是一个简单的解决方案。

    <form class="form" method='post'>
    <div style="width:50%;float:left;">
        <input type="text" name='name' placeholder="name">
        <input type="tel" name='contact' placeholder="contact number">
        <input type="text" name='country' placeholder="Country">
    </div>
     <div style="width:50%;float:left;">
        <input type="date" name='bday' placeholder="Birthday">
        <input type="number" name='age' placeholder="Age">
        <input type="number" name='pin' placeholder="Pin number">
     </div>   
        <button type="submit" id="sign">Sign-up</button> 
    </form>

我已将输入类型更改为有效类型。你给了pin，bday等无效的。您可以查看此link以获取有关此内容的更多信息。

Answer 3

这将是我使用flexbox的解决方案，因为将来您可能不得不添加更多的输入并在一系列设备上使用它。

您可以根据需要更改提交按钮。

.form{
display:flex;
border:1px solid black;
flex-wrap:wrap;
justify-content:space-between;

}

.form > *{
flex:1;
flex-basis:33.33%;
}

 input{
   
   display:block;
   
 }

<div class="wrapper">
    <div class="container">
        <h1>Welcome</h1>        
        <form class="form">
            <input type="text" placeholder="name"> 
            <input type="contact" placeholder="contact number">
            <input type="text" placeholder="Country">
            <input type="text" placeholder="Birthday">
            <input type="text" placeholder="Age">
            <input type="text" placeholder="Pin number">
            <button type="submit" id="sign">Sign-up</button>
        </form>
    </div>
</div>

如何将表单输入拆分为两列？

3 个答案: