내 웹 페이지에는 ‘스키니’목록이 있습니다. 예를 들어 각각 한 단어 길이의 항목 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;
}
li
s에 테두리 하단을 추가 하여 항목의 왼쪽에서 오른쪽으로의 흐름을 더 명확하게 만들 수 있습니다.
답변
미리 설정된 열 수를 원하는 경우 위에서 언급 한대로 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%;