标签贴在另一个标签旁边

Question

我有一个简单的注册表格，但是其中一个标签字段紧贴另一个标签字段。

当前看起来像这样：

电子邮件应位于用户名下，而不是旁边。其他表单元素可以很好地对齐，但是这两者不能很好地对齐。

label {
  float: left;
}

input {
  float: right;
}

<div class="form-wrapper">
  <div>
    <div>
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div>
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>

Answer 1

您为什么不只使用flex，干净且更少的代码。

.form-wrapper {
  width: 400px;
  border: 1px solid blue;
}

.username,
.useremail {
  display: flex;
  margin: 10px;
  width: 350px;
  justify-content: space-between;
  font-weight: bold;
}

<div class="form-wrapper">
  <div>
    <div class="username">
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div class="useremail">
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>

Answer 2

如果要使用float，则必须了解将clear属性用作下一个元素。因此，最好的处理方法是在父级和after上创建一个clear:both伪元素。

在下面的代码中，为每个容器添加了“字段”类，并使用:after对其进行了样式设置。

.field::after{
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

label {
  float: left;
}

input {
  float: right;
}

<div class="form-wrapper">
  <div>
    <div class="field">
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div class="field">
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>

Answer 3

由于css float属性，标签和输入字段分别从左和右堆叠。请注意，移除CSS时，标签/输入对在单独的行上呈现，尽管没有适当的垂直对齐。

可以使用CSS display: table属性和朋友来纠正此问题。基本上，它们使渲染器将表布局应用于table和子代以外的元素。

.d-t {
  display: table;
}

.d-tr {
  display: table-row;
}

.d-tr > label, .d-tr > input {
  display: table-cell;
}

<div class="form-wrapper">
  <div class="d-t">
    <div class="d-tr">
      <label for="user-name">Username:</label>
      <input type="text" id="user-name" name="user-name" required>
    </div>

    <div class="d-tr">
      <label for="user-email">Email:</label>
      <input type="email" id="user-email" name="user-email" required>
    </div>
  </div>
</div>