CSS를 사용하여 목록 항목을 열로 표시하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-11-12 13:30:02

원래의

839명이 탐색했습니다.

How can I Display List Items as Columns using CSS?

CSS를 사용하여 목록 항목을 열로 표시

사용 가능한 너비에 맞게 목록 항목이 세로로 흐르는 반응형 레이아웃을 만들 수 있습니다. CSS 열을 사용합니다. 다음 단계를 따르세요.

컨테이너 요소의 CSS를 정의하고 높이와 원하는 열 수를 지정합니다.

#limheight {
    height: 300px; /* Adjust to desired fixed height */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; /* Placeholder value; can be adjusted */
}

로그인 후 복사

표시 속성 설정 목록 항목을 인라인 차단하여 열 내에서 래핑할 수 있도록 합니다.

#limheight li {
    display: inline-block; /* Necessary for wrapping */
}

로그인 후 복사

지정된 CSS 클래스가 있는 컨테이너 요소에 포함된 목록의 HTML을 포함합니다.

<div>

로그인 후 복사

브라우저 창 크기가 조정되면 목록 항목이 지정된 열 수 내에서 자동으로 배열을 조정하여 원하는 수직 흐름을 유지합니다.

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