如何在表单中正确对齐输入旁边的标签？

在表单中正确对齐输入旁边的标签

表单设计中的常见场景是将标签与其输入字段旁边正确对齐。要实现这种对齐，请考虑以下方法：

为标签元素确定合适的固定宽度并使用 width 属性分配它。将标签的显示属性设置为 inline-block 。使用 text-align: right 将标签内的文本向右对齐。

以下是示例代码片段：

<code class="css">label {
  display: inline-block;
  width: 140px;
  text-align: right;
}</code>

<code class="html"><div class="block">
  <label>Simple label</label>
  <input type="text">
</div>
<div class="block">
  <label>Label with more text</label>
  <input type="text">
</div>
<div class="block">
  <label>Short</label>
  <input type="text">
</div></code>

此方法使用固定宽度，这可能并不理想用于响应式设计。考虑使用 Flexbox 或 CSS 网格来获得响应更快的解决方案。

以上是如何在表单中正确对齐输入旁边的标签？的详细内容。更多信息请关注PHP中文网其他相关文章！