공간 제약이 있는 양식에서 레이블 텍스트 들여쓰기 불일치를 해결하는 방법은 무엇입니까?

제한된 양식에서 레이블 텍스트 들여쓰기 문제 수정

제한된 너비 시나리오에서 양식으로 작업할 때 긴 텍스트가 있는 레이블은 다음으로 줄바꿈될 수 있습니다. 여러 줄. 그러나 두 번째 줄의 들여쓰기가 첫 번째 줄의 들여쓰기와 일치하지 않아 모양이 어수선해질 수 있습니다.

이러한 시각적 차이를 해결하기 위해 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: 행 속성을 활용합니다. 입력 요소 옆에 레이블 요소를 정렬합니다. 또한 margin-left: auto 속성은 텍스트 길이에 관계없이 입력 내용과 일치하도록 레이블의 들여쓰기를 자동으로 조정합니다.

위 내용은 공간 제약이 있는 양식에서 레이블 텍스트 들여쓰기 불일치를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!