Question

在下面的代码中，我逐个输入字段，但我想显示为一行，我想要显示两个输入字段。

现在这是我的输出：

Name
Password

预期产出：

Name password

任何人都可以帮助我

更新了html

<div>
    <input type="text" name="name" class="login-input" placeholder=" Name" autofocus>
    <input type="password" name="password" class="login-input" placeholder="Password">
    <input type="text" name="father_name" class="login-input" placeholder=" Father Name" autofocus>
</div>

 <div>
     <input type="text" name="mother_name" class="login-input" placeholder=" Mother Name" autofocus>
     <textarea type="text" name="adress" class="login-input" placeholder=" Address" cols="40" rows="6" autofocus></textarea>
</div>

的CSS：

 .login-input {
      display: inline-block
      width: 100%;
      height: 37px;
      margin-bottom: 20px;
      padding: 0 21px;
      color: white;
      text-shadow: 0 1px black;
      background: #2b3e5d;
      border: 1px solid #15243b;
      border-top-color: #0d1827;
      border-radius: 4px;
      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
      background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
      background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
      background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
      -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}

Answer 1

使用display: inline-block代替display: block，并将您想要分组的每个输入字段放在单独的div中。

如何将输入分成两行

1 个答案: