フォーム内の視覚的な一貫性を維持するために複数行のラベル テキストをインデントする方法

ラベル テキストのオーバーフロー: 複数行テキストのインデント

フォーム ラベルのテキストが使用可能な幅を超えると、複数行に折り返されます。ただし、最初の行は form 要素と整列しますが、後続の行はインデントされないままになります。これにより、フォームの視覚的な一貫性が損なわれる可能性があります。

この問題に対処するには、ラベル テキストのすべての行を最初の行と一致するようにインデントする CSS ソリューションを採用できます。考えられるアプローチの 1 つは、フレックスボックス プロパティを利用することです。

<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>

このソリューションは、ラベルと入力をフレックスボックス コンテナー内にラップし、水平軸に沿って配置します。ラベルのテキストは、使用可能なスペースに応じて、インデントを維持しながら複数行に折り返されます。

以上がフォーム内の視覚的な一貫性を維持するために複数行のラベル テキストをインデントする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。