내 웹 페이지에는 ‘스키니’목록이 있습니다. 예를 들어 각각 한 단어 길이의 항목 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 솔루션 : 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로 대체를 적용 할 수 있습니다 .

답변

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에 테두리 하단을 추가 하여 항목의 왼쪽에서 오른쪽으로의 흐름을 더 명확하게 만들 수 있습니다.

답변

미리 설정된 열 수를 원하는 경우 위에서 언급 한대로 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>

스 니펫 확장

답변

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

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>

스 니펫 확장

답변

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>

스 니펫 확장

답변

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

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

데모 페이지

답변

지원할 수 있다면 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%;