목록을 열로 나누는 방법이 있습니까?

119

내 웹 페이지에는 '스키니'목록이 있습니다. 예를 들어 각각 한 단어 길이의 항목 100 개 목록이 있습니다. 스크롤링을 줄이기 위해이 목록을 페이지의 2 개 또는 4 개 열로 표시하고 싶습니다. CSS로 어떻게해야합니까?

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
스 니펫 확장

목록이 200 개 항목으로 늘어난 경우 새 목록을 수용하기 위해 많은 수동 조정을 수행 할 필요가 없도록 유연한 솔루션을 선호합니다.

css  html-lists 
— 사용자 776676
소스
그렇게하는 라이브러리가 있습니다 -github.com/yairEO/listBreaker
— vsync
CSS 열 옵션이 가능할 것이라고 믿습니다. 이 옵션은 사용하기 쉽고 필요한 경우 변경합니다. 여기에 자세한 설명이 있습니다 -kolosek.com/css-columns
— Nesha Zoric

답변:

254

CSS 솔루션 : http://www.w3.org/TR/css3-multicol/

브라우저 지원은 여러분이 기대하는 그대로입니다 ..

Internet Explorer 9 이상을 제외한 "모든 곳에서"작동합니다 : http://caniuse.com/multicolumn

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}

참조 : http://jsfiddle.net/pdExf/

IE 지원이 필요한 경우 JavaScript를 사용해야합니다. 예를 들면 다음과 같습니다.

http://welcome.totheinter.net/columnizer-jquery-plugin/

또 다른 해결책은 IEfloat: left 에 대해서만 정상으로 대체하는 것 입니다 . 순서는 틀렸지 만 적어도 비슷하게 보일 것입니다.

참조 : http://jsfiddle.net/NJ4Hw/

<!--[if lt IE 10]>
<style>
li {
    width: 25%;
    float: left
}
</style>
<![endif]-->

이미 사용중인 경우 Modernizr로 대체를 적용 할 수 있습니다 .

— 삼십 도트
소스
li각 열의 첫 번째 상단 테두리를 제거하는 방법이 있습니까?
— Yes Barry
2
이것은 고정 된 공간에서 잘 작동하지만 display : inline 또는 inline-block을 사용할 때처럼 열이 축소되지 않기 때문에 반응 형 디자인에서 문제가됩니다.
— unifiedac
4
재미있는 사실은 : IE 완전히 (IE10 때문에) 접두사없이이 기능을 지원하는 유일한 주요 데스크톱 브라우저 ... 아, 아이러니입니다 ...
— NemoStein
1
list-style-position: inside;내가 믿는 @vsync가 지적한 문제를 구체적으로 해결하는 이 추가 속성을 포함하는 더 나은 크로스 브라우저 지원이 필요할 수 있습니다 .
— ThisClark
4
@PrafullaKumarSahu : 시도 li { break-inside: avoid; }: jsfiddle.net/thirtydot/pdExf/903 . CSS 열에 너무 익숙하지 않으므로 더 나은 방법이있을 수 있습니다.
— thirtydot
19

IE에서도 작동하는 솔루션을 찾고 있다면 목록 요소를 왼쪽으로 띄울 수 있습니다. 그러나 이렇게하면 다음과 같은 목록이 표시됩니다.

item 1 | item 2 | item 3
item 4 | item 5

다음과 같은 깔끔한 열 대신 :

item 1 | item 4
item 2 | 
item 3 |

이를 수행하는 코드는 다음과 같습니다.

ul li {
  width:10em;
  float:left;
}

lis에 테두리 하단을 추가 하여 항목의 왼쪽에서 오른쪽으로의 흐름을 더 명확하게 만들 수 있습니다.

— 매트 햄펠
소스
특정 수의 항목에 대해 작동 할 수 있지만 결과는 2 개 항목에 대해서는 예쁘지 않습니다.
— vsync 2011 년
"순수한 열"을위한 또 다른 CSS 솔루션 : stackoverflow.com/q/54982323/1066234
— Kai Noack
10

미리 설정된 열 수를 원하는 경우 위에서 언급 한대로 column-count 및 column-gap을 사용할 수 있습니다.

그러나 필요한 경우 더 많은 열로 나눌 수있는 제한된 높이의 단일 열을 원하는 경우 디스플레이를 flex로 변경하면 매우 간단하게 수행 할 수 있습니다.

IE9 및 일부 다른 오래된 브라우저에서는 작동하지 않습니다. Can I use 에서 지원을 확인할 수 있습니다.

<style>
  ul {
    display: -ms-flexbox;           /* IE 10 */
    display: -webkit-flex;          /* Safari 6.1+. iOS 7.1+ */
    display: flex;
    -webkit-flex-flow: wrap column; /* Safari 6.1+ */
    flex-flow: wrap column;
    max-height: 150px;              /* Limit height to whatever you need */
  }
</style>

<ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
</ul>
스 니펫 확장

— Maciej Poleski
소스
2
내가 추구하는 것에 매우 가깝습니다. 유일한 단점은 열 너비가 콘텐츠에 맞지 않는다는 것입니다 (다른 길이 항목으로 시도). 열 너비가 어떻게 정의되어 있는지 확실하지 않습니다. 아마도 첫 번째 요소의 with? 어쨌든 이것을 극복하는 방법에 대한 조언이 있습니까?
— jorgeh
높이가 아닌 열 수를 제한 할 수 있습니까? 4 개의 열을 채울 항목이 필요하며 CSS column-count는 열 내에서 고르지 않은 수의 행을 수행합니다. 5. 다음 다음 다음 첫 번째 열에있는 6 개 항목, 4, 6, 추천
— Virge 어썰트
시청자가 요소의 흐름을 볼 수 있도록 항목 (예 : "항목 1", "항목 2")에 라벨을 지정하면 좋을 것입니다
— allkenang
3

이 답변은 반드시 확장되는 것은 아니지만 목록이 커짐에 따라 약간의 조정 만 필요합니다. 의미 적으로는 두 개의 목록 이기 때문에 다소 직관적이지 않은 것처럼 보일 수 있지만 그 외에는 모든 브라우저에서 원하는 방식으로 보일 것입니다.

ul {
  float: left;
}

ul > li {
  width: 6em;
}
<!-- Column 1 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<!-- Column 2 -->
<ul>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
</ul>
스 니펫 확장

— 앨런 헤이 프
소스
2

2020-단순하게 유지하고 CSS 그리드 사용

이러한 답변 중 상당수는 구식이며 2020 년이며 여전히 IE9를 사용하는 사람들을 활성화해서는 안됩니다. CSS 그리드를 사용하는 것이 더 간단 합니다 .

코드는 매우 간단하며 .NET Framework를 사용하여 얼마나 많은 열이 있는지 쉽게 조정할 수 있습니다 grid-template-columns. 이것을 보고 필요에 맞게이 바이올린 을 가지고 놀아 보세요.

.grid-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
<ul class="grid-list">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>
스 니펫 확장

— Maxshuty
소스
1
이것이 저에게 가장 적합한 솔루션입니다.
— Patee Gutee
1

나는 (현재) Chrome ( Version 52.0.2743.116 m) column-count에 오버플로 항목 및 항목 내부의 절대 위치 요소, 특히 일부 치수 전환 과 관련하여 CSS와 관련된 수많은 기이함과 문제 가 있음을 발견했습니다 .

그것은 완전히 엉망이고 고칠 수 없기 때문에 간단한 자바 스크립트를 통해 이것을 시도했고 그것을하는 라이브러리를 만들었습니다-https: //github.com/yairEO/listBreaker

데모 페이지

— vsync
소스
나는 jQuery columnizer 플러그인을 선호하는데, 내 생각에는 내가하던 일에 대해 더 나은 기능을 가지고 있었다 (알파벳순, 내림차순 또는 오름차순, 열 수, 열 너비 등을 정렬 할 수 있었다). jQuery를 Columnizer - WelcomeToTheInter.Net
— Brandito
@Brandito-글쎄요, Columnizer 코드는 확실히 더 많은 옵션을 가지고 있습니다. 약 120 줄인 저에 비해 거의 1,000 줄의 코드이기 때문입니다.하지만 작업을 잘합니다
— vsync
예,하지만 내 문제는 목록이 하나의 목록으로 유지되어야했습니다. 더 유용하고 필요한 것은 사용 사례에 따라 다릅니다.
— Brandito 2017-10-23
0

지원할 수 있다면 CSS 그리드는 1 차원 목록을 반응 형 내부가있는 2 열 레이아웃으로 만드는 가장 깨끗한 방법 일 것입니다.

ul {
  max-width: 400px;
  display: grid;
  grid-template-columns: 50% 50%;
  padding-left: 0;
  border: 1px solid blue;
}

li {
  list-style: inside;
  border: 1px dashed red;
  padding: 10px;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
<ul>
스 니펫 확장

두 개의 열 레이아웃을 제공하는 두 개의 핵심 라인입니다.

display: grid;
grid-template-columns: 50% 50%;
— MattLummus
소스
0

모바일 우선 방법은 CSS 열 을 사용하여 작은 화면에 대한 경험을 만든 다음 미디어 쿼리 를 사용 하여 레이아웃에 정의 된 각 중단 점에서 열 수를 늘리는 것입니다.

ul {
  column-count: 2;
  column-gap: 2rem;
}
@media screen and (min-width: 768px)) {
  ul {
    column-count: 3;
    column-gap: 5rem;
  }
}
<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>
스 니펫 확장

— 조쉬 합 다스
소스
0

내가 한 일은 다음과 같습니다.

ul {
      display: block;
      width: 100%;
}

ul li{
    display: block;
    min-width: calc(30% - 10px);
    float: left;
}

ul li:nth-child(2n + 1){
    clear: left;
}
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>0</li>
</ul>
스 니펫 확장

— GuruKay
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.