スペース制限のあるフォームでのラベル テキストのインデントの不一致を解決するにはどうすればよいですか?

制限されたフォームでのラベル テキストのインデントの問題を修正する

幅が制限されたシナリオでフォームを操作する場合、長いテキストを含むラベルが折り返されることがあります。複数行。ただし、2 行目のインデントが 1 行目のインデントと一致せず、見た目が乱雑になる可能性があります。

この視覚的な不一致に対処するには、CSS を使用してすべての行にわたって均一なインデントを実現できます。

解決策:

提供されたコード スニペットは、インデントの問題に対処する解決策を提供します。

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

.checkbox-field label {
    margin-left: auto;
}</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>

この解決策は、flex-direction: row プロパティを利用します。ラベル要素を入力要素の隣に配置します。さらに、margin-left: auto プロパティは、テキストの長さに関係なく、ラベルのインデントを入力のインデントと一致するように自動的に調整します。

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