CSS에서 두 줄 목록 항목의 두 번째 줄을 정렬하는 방법은 무엇입니까?

두 번째 줄이 정렬된 두 줄의 Li 항목

순서가 지정되지 않은 목록에서 두 줄에 걸쳐 있는 긴 목록 항목을 만날 수 있습니다. 그러나 두 번째 줄은 첫 번째 줄과 정렬되지 않습니다. 이 잘못된 정렬을 해결하려면 text-indent 속성을 활용하세요.

text-indent 속성은 요소의 텍스트 내용 첫 번째 줄 앞의 가로 간격을 지정합니다. 음수 텍스트 들여쓰기 값을 지정하면 첫 번째 줄을 왼쪽으로 일정량 이동할 수 있습니다. 이 오프셋의 균형을 맞추려면 양의 왼쪽 패딩 값을 적용하세요.

제공된 코드 예제에서 .fa-fw 클래스의 너비는 1.28571429em입니다. 두 번째 줄을 정렬하기 위해 li 요소의 text-indent를 -1.28571429em으로 설정하고 padding-left를 1.28571429em으로 설정했습니다. 이렇게 하면 오프셋이 취소되어 왼쪽 플러시 두 번째 줄이 됩니다.

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

이 솔루션을 구현하면 긴 목록 항목의 두 번째 줄이 첫 번째 줄과 정렬되어 시각적으로 균형 잡힌 정렬되지 않은 목록이 만들어집니다.

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