CSS で後続のラップされたラベル行をインデントするにはどうすればよいですか?

折り返されたラベル テキストの後続の行をインデントする

フォームの幅に制限がある場合、ラベル テキストが複数の行に折り返される可能性があり、美観が損なわれる可能性があります。懸念事項。 input 要素の存在により最初の行はインデントされますが、後続の行はインデントされず、不均一な外観が作成される場合があります。

CSS のみを使用して 2 行目以降のインデントを実現するには、次のアプローチの使用を検討してください。

親コンテナ内の入力要素とそのラベルの両方をクラス "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 中国語 Web サイトの他の関連記事を参照してください。