특정 항목 다음에 인라인 요소 목록에서 줄 바꿈을 강제하는 방법은 무엇입니까?

인라인 블록 콘텐츠의 줄 바꿈

HTML 콘텐츠에 인라인 블록 li 요소를 사용하여 표현된 항목 목록이 포함되어 있는 상황을 생각해 보세요. 목표는 세 번째 li 항목 뒤에 줄바꿈을 삽입하여 3열 효과를 만드는 것입니다.

CSS의 한계

전제는 줄바꿈을 추가하는 것입니다. CSS를 직접 사용하여 특정 인라인 블록 요소 사이를 이동하는 것은 불가능합니다. content: "xxx" 및 display: block이 있는 :after 의사 요소를 삽입하거나 :nth-child를 사용하여 세 번째 li를 선택하는 방법으로는 충분하지 않습니다.

인라인 요소에 대한 해결 방법

그러나 li 요소가 디스플레이: 인라인 블록에서 디스플레이: 인라인으로 변경되는 경우 해결 방법이 있습니다. 다음과 같이 CSS를 추가하면 세 번째 li 요소 뒤에 줄 바꿈을 삽입할 수 있습니다.

<code class="CSS">li { 
    display: inline; 
}
li:nth-child(3):after { 
    content: "\A";
    white-space: pre; 
}</code>

이 예에서 "A"는 줄 바꿈을 삽입하고 공백: 사전은 인라인 내에 이를 유지합니다. context.

결론

CSS를 사용하여 인라인 블록 요소 사이에 줄바꿈을 직접 삽입하는 것은 불가능하지만 이 해결 방법은 인라인 요소에서도 가능하다는 것을 보여줍니다. 콘텐츠를 열로 나누거나 인라인 콘텐츠 내의 흐름을 변경해야 하는 경우에 대한 잠재적인 솔루션을 제공합니다.

위 내용은 특정 항목 다음에 인라인 요소 목록에서 줄 바꿈을 강제하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!