是时候告别杂乱的表单：巧用文字两端对齐，打造整洁高效的交互体验

前端

2023-09-02 09:43:52

文字两端对齐：提升表单的美观性和易用性

在设计表单时，文字两端对齐至关重要，因为它不仅能提升表单的视觉吸引力，更能增强其易用性，让用户填写信息更加轻松便捷。

文字两端对齐的优势

提升美观性： 整齐划一的文字排列使表单外观更美观、专业，给用户留下良好的印象。

增强易用性： 文字两端对齐提高了表单的可读性，让用户更容易定位和输入信息，避免误差和填写困难。

如何实现文字两端对齐

使用 CSS 属性 text-align 和 text-align-last 可以轻松实现文字两端对齐：

text-align 属性： 设置元素中文字的水平对齐方式，取值为 left、center、right 或 justify。对于表单，我们使用 text-align: justify; 进行两端对齐。

text-align-last 属性： 设置元素中最后一行文字的水平对齐方式，也取值为 left、center、right 或 justify。通常使用 text-align-last: justify; 确保表单最后一行文字同样两端对齐。

实战案例：

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name">

  <label for="email">邮箱：</label>
  <input type="email" id="email">

  <label for="phone">电话号码：</label>
  <input type="tel" id="phone">

  <input type="submit" value="提交">
</form>

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

label {
  text-align: right;
  width: 100px;
}

input {
  flex: 1;
}

input[type="submit"] {
  align-self: flex-end;
}