제한된 너비의 양식에 대해 CSS에서 래핑된 레이블 텍스트를 들여쓰는 방법은 무엇입니까?

래핑된 라벨 텍스트 들여쓰기를 위한 CSS

제한된 너비의 양식을 디자인할 때 양식 너비를 초과하는 라벨이 발생하여 텍스트가 발생하는 경우가 많습니다. 쌈. 그러나 줄 바꿈된 텍스트의 두 번째 줄이 첫 번째 줄에 비해 적절한 들여쓰기가 부족한 경우 문제가 발생합니다.

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