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

두 줄의 Li 항목: 두 번째 줄의 정렬 불량 해결

순서가 지정되지 않은 목록으로 작업할 때 목록이 다음과 같은 시나리오에 직면할 수 있습니다. 항목이 두 번째 줄로 넘어가서 두 번째 줄이 첫 번째 줄에서 오프셋됩니다. 이러한 잘못된 정렬은 목록의 시각적 미학을 방해할 수 있습니다.

제공된 예에서는 다음 HTML 코드를 사용하여 목록을 생성했습니다.

<ul>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>List item on 1 line</li>
  <li><i class="fa fa-check fa-fw"></i>This is a list item that actually takes up 2 lines. Looks ugly</li>
</ul>

이 문제는 체크 아이콘( )는 인라인 콘텐츠입니다. 텍스트가 줄 바꿈되면 아이콘이 같은 줄에 남아 두 번째 줄이 잘못 정렬됩니다.

이 문제를 해결하려면 왼쪽 가로 공간의 크기를 지정하는 text-indent 속성을 활용할 수 있습니다. 요소의 첫 번째 텍스트 줄 앞에. 음수 텍스트 들여쓰기 값을 설정하면 첫 번째 줄을 왼쪽으로 이동하여 다음 줄에 맞춰 정렬할 수 있습니다.

li {
  text-indent: -1.28571429em;
}

음수 들여쓰기를 보완하려면 양수 패딩을 적용할 수 있습니다. 요소:

li {
  padding-left: 1.28571429em;
}

이러한 스타일을 적용하면 목록 항목의 두 번째 줄을 첫 번째 줄과 정렬하여 더욱 일관적인 시각적 결과를 얻을 수 있습니다. 발표합니다.

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