如何在 CSS 中缩进后续换行标签行？

缩进换行标签文本的后续行

当面临表单宽度的限制时，标签文本可以换行到多行，从而产生美观效果的担忧。虽然第一行由于输入元素的存在而缩进，但后续行可能不会缩进，从而产生不均匀的外观。

要仅使用 CSS 实现缩进第二行和后续行，请考虑使用以下方法：

使用类 "checkbox-field" 将输入元素及其标签包含在父容器中。将此父级的显示属性设置为 "flex" 并将 flex-direction 设置为 "row"。

<code class="css">.checkbox-field {
  display: flex;
  flex-direction: row;
}</code>

示例用法：

<code class="html"><div class="checkbox-field">
  <input type="checkbox" id="check">
  <label for="check">Field 2 Label, may be longer than normal, This is an example for this lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem</label>
</div></code>

该解决方案灵活地将标签文本调整为可用宽度，同时保持一致的视觉外观。

以上是如何在 CSS 中缩进后续换行标签行？的详细内容。更多信息请关注PHP中文网其他相关文章！