Question

我正在尝试创建一个包含一些要由用户填写的字段的表单。字段的名称及其输入字段彼此不完全对齐，导致用户在填写表单时遇到困难，因为它会对输入框所针对的字段造成混淆。我甚至试图将表单元素放在一个表中，但随后它破坏了UI，因为整行完全包含字段名称和输入框，它看起来很难看。附上屏幕截图。https://www.haproxy.org/download/1.7/doc/configuration.txt

<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

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

Answer 2

使用flexbox作为包装器可以完美地对齐它们。

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>

HTML表单字段名称和输入字段未正确对齐

2 个答案: