html - 尝试将输入字段与标签对齐

Question

我想对齐下面显示的输入字段，继续使用 <label>以正确的方式。

代码如下:

<form action="add.php" method="POST" enctype="multipart/form-data">
    <label for="refNo">Field1 name (long)</label>
    <input id="refNo" type="text" name="refNo" value="" /><br>
    <label for="name">Field2 name</label>
    <input id="name" type="text" name="name" value="" /><br>    
    <input type="submit" value=":: Add  ::" name="addBtn" />
</form>

我想分开<label> <div> 中的标签和另一个输入字段，然后通过一些 float 操作我进行了预期的对齐，这是正确的方法吗？

Answer 1

这个怎么样

form > label {
  min-width: 185px;
  display: inline-block;
}

<form action="add.php" method="POST" enctype="multipart/form-data">
  <label for="refNo">Field1 name (long)</label>
  <input id="refNo" type="text" name="refNo" value="" /><br>
  <label for="name">Field2 name</label>
  <input id="name" type="text" name="name" value="" /><br>    
  <input type="submit" value=":: Add  ::" name="addBtn" />
</form>