使用css在html中对齐文本框和标签

Question

当我每行只有1个标签和1个文本框时。我使用float对齐它们：left和float：然后使用字段集的宽度来挤压它们。

但我现在需要做的是每行3个标签和3个文本框。知道如何对齐吗？

编辑：忽略名称，我只是复制粘贴，因此他们有相同的名称LOL

<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'>
    <legend>Add Hardware Availability</legend>
       <p>
          <label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'>
       </p>

       <p>
          <label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'>
       </p>

       <p>
          <label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'>
       </p>
</fieldset>

This is what I had in mind to happen

Current look without css

Answer 1

我建议你使用一个有经验的框架，例如Bootstrap ......但是如果你想自己做，一种可能的方法如下：

＆＃13;

＆＃13;

fieldset {
  width: 100%;
}
.row {
  width: 100%;
  clear: both;
}
.row div {
  width: 33%;
  float: left;
}
label {
  display: block;
  float: left;
  width: 40%;
  text-align:right;
}
input {
  width: 50%;
}

＆＃13;

<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'>
  <legend>Add Hardware Availability</legend>
  <div class="row">
    <div><label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div>
  </div>

  <div class="row">
    <div><label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div>
  </div>

  <div class="row">
    <div><label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'></div>
  </div>
</fieldset>

＆＃13;

＆＃13;

＆＃13;