Web sayfamın 'zayıf' bir listesi var: örneğin, her biri bir kelime uzunluğunda 100 öğeden oluşan bir liste. Kaydırmayı azaltmak için bu listeyi sayfada iki hatta dört sütun halinde sunmak istiyorum. Bunu CSS ile nasıl yapmalıyım?

<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>

Çözümün esnek olmasını tercih ederim, böylece liste 200 maddeye çıkarsa, yeni listeye uymak için çok fazla manuel ayarlama yapmam gerekmez.

CSS çözümü: http://www.w3.org/TR/css3-multicol/

Tarayıcı desteği tam olarak beklediğiniz şeydir ..

Internet Explorer 9 veya daha eski sürümler dışında "her yerde" çalışır: 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;
}

Bakınız: http://jsfiddle.net/pdExf/

IE desteği gerekiyorsa, JavaScript kullanmanız gerekir, örneğin:

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

Başka bir çözüm, normal çare olmaktır float: leftiçin sadece IE . Sıra yanlış olacak ama en azından benzer görünecek:

Bakınız: http://jsfiddle.net/NJ4Hw/

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

Zaten kullanıyorsanız, bu yedeği Modernizr ile uygulayabilirsiniz .

IE'de de çalışan bir çözüm arıyorsanız, liste öğelerini sola kaydırabilirsiniz. Ancak bu, aşağıdaki gibi kıvrılan bir listeyle sonuçlanacaktır:

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

Düzgün sütunlar yerine, örneğin:

item 1 | item 4
item 2 | 
item 3 | 

Bunu yapacak kod şu şekilde olacaktır:

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

liÖğelerin soldan sağa akışını daha belirgin hale getirmek için s'ye bir border-bottom ekleyebilirsiniz .

Önceden belirlenmiş bir sütun sayısı istiyorsanız, yukarıda belirtildiği gibi sütun sayısını ve sütun aralığını kullanabilirsiniz.

Bununla birlikte, gerekirse daha fazla sütuna bölünecek sınırlı yüksekliğe sahip tek bir sütun istiyorsanız, bu, ekranı esnek olarak değiştirerek oldukça basit bir şekilde gerçekleştirilebilir.

Bu, IE9 ve diğer bazı eski tarayıcılarda çalışmayacaktır. Desteği kullanabilir miyim?

<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>

Bu yanıtın ölçeklenmesi gerekmez, ancak liste büyüdükçe yalnızca küçük ayarlamalar gerektirir. Anlamsal olarak, iki liste olduğu için biraz sezgisel görünebilir , ancak bunun dışında şimdiye kadar yapılmış herhangi bir tarayıcıda istediğiniz şekilde görünecektir.

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 - Basit tutun, CSS Izgarasını kullanın

Bu yanıtların çoğu güncel değil, 2020 yılı ve hala IE9 kullanan kişilere izin vermemeliyiz. CSS ızgarasını kullanmak çok daha basit .

Kod çok basit ve kaç tane sütun olduğunu kolayca ayarlayabilirsiniz grid-template-columns. Bunu görün ve ihtiyaçlarınızı karşılamak için bu kemanla oynayın .

.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>

(Şu anda) Chrome'un ( Version 52.0.2743.116 m) column-counttaşma öğeleri ve özellikle bazı boyut geçişlerinde öğelerin içinde mutlak konumlandırılmış öğelerle ilgili css ile ilgili tonlarca tuhaflık ve sorun olduğunu buldum .

tam bir karmaşa ve düzeltilemez, bu yüzden basit bir javascript ile bunun üstesinden gelmeyi denedim ve bunu yapan bir kütüphane oluşturdum - https://github.com/yairEO/listBreaker

Demo sayfası

Destekleyebiliyorsanız CSS Izgarası, duyarlı iç mekanlara sahip iki sütun düzenine tek boyutlu bir liste oluşturmanın muhtemelen en temiz yoludur.

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>

Bunlar, size 2 sütun düzeninizi verecek iki ana satırdır.

display: grid;
grid-template-columns: 50% 50%;

Mobil cihazların öncelikli yolu, daha küçük ekranlar için bir deneyim oluşturmak üzere CSS Sütunları kullanmak, ardından mizanpajınızın tanımlı kesme noktalarının her birinde sütun sayısını artırmak için Medya Sorguları'nı kullanmaktır .

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>

İşte yaptığım şey

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>