CSS에서 후속 래핑된 레이블 줄을 들여쓰는 방법은 무엇입니까?

포장된 라벨 텍스트의 후속 줄 들여쓰기

양식 너비에 대한 제약이 있는 경우 라벨 텍스트가 여러 줄로 줄바꿈되어 미학적으로 이어질 수 있습니다. 우려. 첫 번째 줄은 입력 요소로 인해 들여쓰기되지만 다음 줄은 들여쓰기가 되지 않아 모양이 균일하지 않을 수 있습니다.

CSS만 사용하여 두 번째 및 후속 줄을 들여쓰려면 다음 접근 방식을 사용하는 것이 좋습니다.

"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 중국어 웹사이트의 기타 관련 기사를 참조하세요!