如何垂直对齐表单中的所有字段？

Question

#application-form label {
    display: block;
    padding-bottom: 30px;
}
#application-form input, select {
    margin-left: 50px;
}
#application-submit {
    margin-left: 0px;
}
#checkbox-agree {
    margin-left: 0px;
    margin-right: 10px;
}

<form action="application-thank-you/" method="POST" id="application-form">
    <h2>What are you wanting to buy?</h2>
    <label>Make and model: *
        <input type="text" name="what_make">
    </label>
    <label>How much do you want to be pre approved for?: *
        <input type="number" name="what_pre_approved" required>
    </label>
    <label>How many applicants? *
        <select name="what_how_many" id="what_how_many" required>
            <option value="1">1</option><option value="2">2</option>
        </select>
    </label>
    <hr>
    <h2>Contact Details - Applicant 1</h2>
    <label>Title:*
        <select name="contact_title" required>
            <option value="mr">Mr</option><option value="mrs">Mrs</option><option value="ms">Ms</option><option value="miss">Miss</option>
        </select>
    </label>
</form>

以下是我正在运行的代码，但字段未垂直对齐，我该怎么办才能将它们对齐，如下图所示。

结果应该是：

Answer 1

您还可以使用 flexbox 将输入字段与标签代码右侧对齐。

显示：flex - ＆gt; 告诉使用flexbox

flex-flow ：row nowrap - ＆gt; 将项目放在水平线上，并在调整大小窗口时不会换行

对齐内容：space-between - ＆gt; 将内容推送到元素宽度的任意一侧

宽度：80％ - ＆gt; 我选择的随机宽度示例，您可以使用它来适应您的设计。

查看下面的更新代码，我遗漏了您似乎不需要获得所需结果的CSS。

另外，使用rem代替px很好，因为它们可以缩放。

css-tricks非常方便 flexbox guide

＆＃13;

＆＃13;

#application-form label {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: 80%;
    padding-bottom: 1.5rem;
}
#application-form input, select {
    margin-left: 1rem;
}

＆＃13;

<form action="application-thank-you/" method="POST" id="application-form">
    <h2>What are you wanting to buy?</h2>
    <label>Make and model: *
        <input type="text" name="what_make">
    </label>
    <label>How much do you want to be pre approved for?: *
        <input type="number" name="what_pre_approved" required>
    </label>
    <label>How many applicants? *
        <select name="what_how_many" id="what_how_many" required>
            <option value="1">1</option><option value="2">2</option>
        </select>
    </label>
    <hr>
    <h2>Contact Details - Applicant 1</h2>
    <label>Title:*
        <select name="contact_title" required>
            <option value="mr">Mr</option><option value="mrs">Mrs</option><option value="ms">Ms</option><option value="miss">Miss</option>
        </select>
    </label>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，请勿使用标签中的输入。其次，我建议您为label提供for属性和id输入。

另外，我建议你在div中包装每个“line”。这是我喜欢它的方式。下面的代码显示了如何在没有div的情况下执行此操作。

label{
  display: inline-block;
  width: 48%;
  box-sizing: border-box;
  vertical-align: top;
}

input, select{
  display: inline-block;
  width: 48%;
  box-sizing: border-box;
  margin-left: 2%;
  vertical-align: top;
}

<form action="application-thank-you/" method="POST" id="application-form">
    <h2>What are you wanting to buy?</h2>
    <label for="what_make">Make and model: *</label>
    <input type="text" name="what_make" id="what_make">
    <label for="what_pre_approved">How much do you want to be pre approved for?: *</label>
    <input type="number" name="what_pre_approved" id="what_pre_approved" required>
    <label for="what_how_many">How many applicants? *</label>
    <select name="what_how_many" id="what_how_many" required>
        <option value="1">1</option><option value="2">2</option>
    </select>
    <hr>
    <h2>Contact Details - Applicant 1</h2>
    <label for="contact_title">Title:*</label>
    <select name="contact_title" id="contact_title" required>
        <option value="mr">Mr</option>
        <option value="mrs">Mrs</option>
        <option value="ms">Ms</option>
        <option value="miss">Miss</option>
    </select>
</form>

Answer 3

您需要稍微修改html和css代码才能获得所需的结果。试试这段代码。

<form action="application-thank-you/" method="POST" id="application-form">
    <h2>What are you wanting to buy?</h2>
    <label><span>Make and model: *</span>
        <input type="text" name="what_make">
    </label>
    <label><span>How much do you want to be pre approved for?: *</span>
        <input type="number" name="what_pre_approved" required>
    </label>
    <label><span>How many applicants? *</span>
        <select name="what_how_many" id="what_how_many" required>
            <option value="1">1</option><option value="2">2</option>
        </select>
    </label>
    <hr>
    <h2>Contact Details - Applicant 1</h2>
    <label><span>Title:*</span>
        <select name="contact_title" required>
            <option value="mr">Mr</option><option value="mrs">Mrs</option><option value="ms">Ms</option><option value="miss">Miss</option>
        </select>
    </label>
</form>

#application-form label {
  display: block;
    padding-bottom: 30px;
}
#application-form label span {
  display: inline-block;
  width: 40%;
}
#application-form input, select {
    margin-left: 50px;
}
#application-submit {
    margin-left: 0px;
}
#checkbox-agree {
    margin-left: 0px;
    margin-right: 10px;
}

Answer 4

您可以使用表格中的表格：

#application-form table {
  width: 100%;
}

#application-form table tr td {
  padding: 10px;
}

#application-form table tr td:first-child {
  width: 30%;
}

#application-form label {
  padding-bottom: 30px;
}

#application-form input,
select {
  margin-left: 50px;
}

#application-submit {
  margin-left: 0px;
}

#checkbox-agree {
  margin-left: 0px;
  margin-right: 10px;
}

<form action="application-thank-you/" method="POST" id="application-form">
  <h2>What are you wanting to buy?</h2>
  <table>
    <tr>
      <td><label for="what_make">Make and model: *</label></td>
      <td><input type="text" name="what_make"></td>
    </tr>
    <tr>
      <td><label for="what_pre_approved">How much do you want to be pre approved for?: *</label></td>
      <td><input type="number" name="what_pre_approved" required></td>
    </tr>
    <tr>
      <td><label for="what_how_many">How many applicants? *    </label></td>
      <td>
        <select name="what_how_many" id="what_how_many" required>
            <option value="1">1</option><option value="2">2</option>
        </select>
      </td>
    </tr>
  </table>


  <hr>
  <h2>Contact Details - Applicant 1</h2>
  <table>
    <tr>
      <td>
        <label>Title:*</label>
      </td>
      <td>
        <select name="contact_title" required>
            <option value="mr">Mr</option><option value="mrs">Mrs</option><option value="ms">Ms</option>
            <option value="miss">Miss</option>
        </select>
      </td>
    </tr>
  </table>
</form>

Answer 5

试试这个..这可能会对你有所帮助。我曾经用过桌子。

＆＃13;

＆＃13;

#application-form label {
    display: block;
    padding-bottom: 30px;
   
}
#application-form input, select {
    margin-left: 0px;
}
#application-form td {
    vertical-align: initial;
}
#application-submit {
    margin-left: 0px;
}
#checkbox-agree {
    margin-left: 0px;
    margin-right: 10px;
}

＆＃13;

<form action="application-thank-you/" method="POST" id="application-form">
 <h2>What are you wanting to buy?</h2>
 <table>
   <tbody>
      <tr>
         <td>
            <label>Make and model: 
            </label>
         </td>
         <td>
            <lable><input type="text" name="what_make"> </lable>
         </td>
      </tr>
      <tr>
         <td>
            <label>How much do you want to be pre approved for?: *
            </label>
         </td>
         <td>
            <lable> <input type="number" name="what_pre_approved" required> </lable>
         </td>
      </tr>
      <tr>
         <td>
            <label>How many applicants? *
            </label>
         </td>
         <td>
            <lable><select name="what_how_many" id="what_how_many" required>
            <option value="1">1</option><option value="2">2</option>
        </select> </lable>
         </td>
      </tr>
   </tbody>
</table>

    <hr>
    <h2>Contact Details - Applicant 1</h2>
    <table>
      <tbody>
         <tr>
         <td>
            <label>Title:*
            </label>
         </td>
         <td>
            <lable><select name="contact_title" required>
            <option value="mr">Mr</option><option value="mrs">Mrs</option><option value="ms">Ms</option><option value="miss">Miss</option>
        </select></lable>
         </td>
      </tr>
      </tbody>
    </table>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 6

将position:absolute; left: 400;添加到 #application-from input ,select { margin-left: 50px; }

#application-form label {
    display: block;
    padding-bottom: 30px;
}
#application-form input, select {
    margin-left: 50px;
    position:absolute;
    left: 400px;
}
#application-submit {
    margin-left: 0px;
}
#checkbox-agree {
    margin-left: 0px;
    margin-right: 10px;
}

<form action="application-thank-you/" method="POST" id="application-form">
    <h2>What are you wanting to buy?</h2>
    <label>Make and model: *
        <input type="text" name="what_make">
    </label>
    <label>How much do you want to be pre approved for?: *
        <input type="number" name="what_pre_approved" required>
    </label>
    <label>How many applicants? *
        <select name="what_how_many" id="what_how_many" required>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </label>
    <hr>
    <h2>Contact Details - Applicant 1</h2>
    <label>Title:*
        <select name="contact_title" required>
            <option value="mr">Mr</option>
            <option value="mrs">Mrs</option><option value="ms">Ms</option><option value="miss">Miss</option>
        </select>
    </label>
</form>