幅に制限のあるフォームのCSSで折り返されたラベルテキストをインデントするにはどうすればよいですか?

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

幅が制限されたフォームをデザインする場合、フォームの幅を超えるラベルが発生してテキストが表示されることがよくあります。ラッピング。ただし、折り返されたテキストの 2 行目が 1 行目に比べて適切なインデントを欠いている場合に問題が発生します。

これに対処するために、CSS は簡単な解決策を提供します。 「flex-direction: row」でラベルコンテナの表示プロパティを「flex」に設定することで、ラベルとそれに対応する入力要素を同じ行に配置します。これにより、折り返されたテキストのすべての行に同じインデントが適用されます。

次に例を示します:

<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 テクニックを利用すると、テキストのすべての行にインデントを簡単に適用できます。ラベルのテキストをラップして、フォームの視覚的な魅力を向上させます。

以上が幅に制限のあるフォームのCSSで折り返されたラベルテキストをインデントするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。