HTML表单字段名和输入字段之间没有正确对齐。

Question

我正在尝试创建一个表单，其中包含一些要由用户填充的字段。字段和输入字段的名称不完全对齐，导致用户在填写表单时遇到困难，因为它会造成输入框用于哪个字段的混淆。我甚至尝试将表单元素放入表中，但随后它破坏了UI，因为整个行都包含字段名和输入框，而且看起来很难看。随函附上屏幕截图。

​

<form action="http://203.115.101.30/kpmProcess/index.php/support/form_NewDeviceAddition" method="post" accept-charset="utf-8">
    <form data-toggle="validator" method="post"  name="myformlisting"  id="myformlisting" class="form form-horizontal" >
        <table width="100%">
            <tr>

              <div class="form-group">
                  <td colspan="2">
                <label class="col-sm-3 control-label" for="form-control-2"  >Dispatch Date:*</label>
                  </td>
                  <td colspan="2">
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="date" id="datepicker1" value="" required />
                </div>
                  </td>
              </div>
        </tr>
        </table>
              <div class="form-group">
                <label class="col-sm-3 control-label" for="form-control-3">Customer Name:*</label>
                <div class="col-sm-9">
                  <input type="text"  class="form-control" name="customer_name" id="customer_name_id" required >
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label" for="form-control-4">Truck No:*</label>
                <div class="col-sm-9">
                  <input type="text" class="form-control" name="truck_no" id="truck_no_id" required >
                </div>
              </div>

有更多的字段和表单标签关闭在最后。

Answer 1

使用柔性盒作为包装器可以很好地对齐它们。

​

input {
  padding: .5em;
}

.container {
  width: 50%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5em;
}

.container:nth-child(1) label {
align-self: flex-end; /* vertical align bottom */
background: lightblue;
}

.container:nth-child(2) label {
align-self: center; /* vertical align center */
background: pink;
}

.container:nth-child(3) label {
align-self: flex-start; /* vertical align top */
background: lightgreen;
}

<div class="container">
  <label for="name">Customer name</label>
  <input name="name" type="text">
</div>
<div class="container">
  <label for="zip">ZIP code</label>
  <input name="zip" type="text">
</div>
<div class="container">
  <label for="place">Place</label>
  <input name="place" type="text">
</div>

​

Answer 2

也许一些margin-top和margin-bottom应该使表单更具可读性。