두 줄로 된 목록 항목을 잘못 정렬된 두 번째 줄로 정렬하는 방법은 무엇입니까?

두 줄의 Li 항목입니다. 두 번째 줄에는 여백이 없습니다

두 줄에 걸쳐 있는 목록 항목을 처리할 때 두 번째 줄이 첫 번째 줄과 정렬되지 않는 경우 정렬 구현이 필요합니다. 이러한 상황은 주로 목록 내의 인라인 요소가 정렬에 영향을 주지 않고 후속 텍스트를 흐르게 하기 때문에 발생합니다.

이 문제를 해결하려면 'text-indent' 속성을 활용할 수 있습니다. 이 속성은 요소 내에서 텍스트의 첫 번째 줄이 시작되기 전의 간격을 제어합니다. 음수 'text-indent' 값을 적용하면 첫 번째 줄을 특정 양만큼 왼쪽으로 이동할 수 있습니다. 그런 다음 이 변위를 양수 '왼쪽 패딩' 값으로 오프셋하여 원하는 정렬을 얻을 수 있습니다.

다음 예를 고려하세요.

ul {
  width: 300px;
}
li {
  padding-left: 1.28571429em;
  text-indent: -1.28571429em;
}

이 예에서 '1.28571429em' 값은 체크 표시를 담당하는 'font-awesome' 아이콘 요소의 너비에 해당합니다. 이 기술을 사용하면 텍스트가 두 줄의 아이콘 아래에 정렬되어 잘못된 정렬을 수정할 수 있습니다.

위 내용은 두 줄로 된 목록 항목을 잘못 정렬된 두 번째 줄로 정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!