如何在宽度有限的表单上缩进多行标签文本？

在有限宽度的表单中缩进多行标签文本

在宽度有限的表单中，虽然较长的标签文本可能会换行到多行，但只有第一行由于关联的输入元素，通常会缩进。这可能会导致外观无组织。

要解决此问题并一致地缩进所有行，您可以使用 CSS：

.checkbox-field {</p><pre class="brush:php;toolbar:false">display: flex;
flex-direction: row;

}

<div class="checkbox-field"></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><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>

登录后复制

CSS 代码：

• 将弹性框应用于容器元素 .checkbox-field。
• 将弹性方向设置为行，水平对齐元素。

HTML 代码：

• 创建一个容器元素来保存输入和标签元素。
• 在容器上使用 display: flex 来启用 flexbox布局。
• 使用 flex-direction: row 水平对齐输入和标签。

通过这些调整，标签文本将一致地换行和缩进，从而形成视觉上组织的形式。