CSS를 사용하여 목록 항목을 세로로 열로 표시하려면 어떻게 해야 합니까?

CSS 열: 목록 항목을 세로로 표시

목록 항목을 세로로 열로 표시해야 하는 과제에 대응하여 CSS3 열을 사용합니다. 이 기능을 사용하면 원하는 레이아웃을 쉽게 얻을 수 있습니다.

다음 HTML 코드를 고려하세요.

<div>

이제 CSS를 추가하여 스타일을 지정하겠습니다.

#limheight {
    height: 800px; /* Fixed height */
    -webkit-column-count: 3; /* WebKit prefix */
    -moz-column-count: 3; /* Mozilla prefix */
    column-count: 3; /* Standard */
}

#limheight li {
    display: inline-block; /* Necessary for columns to work */
}

CSS 열을 사용하면 지정된 수의 열(이 경우 3)이 자동으로 생성됩니다. 브라우저 크기가 조정되면 열 너비가 동적으로 조정됩니다. 이를 통해 원하는 목록 항목의 세로 라인업을 제공합니다.

CSS 열의 강력한 기능을 활용하여 반응형 레이아웃을 향상하고 목록 항목을 열로 우아하게 표시해 보세요!

위 내용은 CSS를 사용하여 목록 항목을 세로로 열로 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!