หน้าเว็บของฉันมีรายการ "ผอม" ตัวอย่างเช่นรายการ 100 รายการที่มีความยาวหนึ่งคำ เพื่อลดการเลื่อนฉันต้องการนำเสนอรายการนี้ในสองหรือสี่คอลัมน์ในหน้า ฉันควรทำอย่างไรกับ 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/

ทางออกก็คือการ fallback มาเป็นปกติfloat: leftสำหรับIE เท่านั้น คำสั่งจะไม่ถูกต้อง แต่อย่างน้อยก็จะดูคล้ายกัน:

ดู: 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 เพื่อให้การไหลของรายการจากซ้ายไปขวาชัดเจนยิ่งขึ้น

หากคุณต้องการจำนวนคอลัมน์ที่ตั้งไว้ล่วงหน้าคุณสามารถใช้จำนวนคอลัมน์และช่องว่างคอลัมน์ดังที่กล่าวไว้ข้างต้น

อย่างไรก็ตามหากคุณต้องการคอลัมน์เดียวที่มีความสูง จำกัด ซึ่งจะแบ่งเป็นคอลัมน์เพิ่มเติมหากจำเป็นสิ่งนี้สามารถทำได้โดยการเปลี่ยนการแสดงผลเป็นแบบยืดหยุ่น

สิ่งนี้จะไม่ทำงานบน 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 Grid

คำตอบมากมายเหล่านี้ล้าสมัยมันเป็นปี 2020 และเราไม่ควรเปิดใช้งานผู้ที่ยังใช้ IE9 อยู่ มันเป็นวิธีที่ง่ายมากที่จะใช้เพียงCSS ตาราง

รหัสนี้ง่ายมากและคุณสามารถปรับจำนวนคอลัมน์ได้อย่างง่ายดายโดยใช้ไฟล์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) มีปัญหาและปัญหามากมายเกี่ยวกับ css column-countเกี่ยวกับรายการล้นและองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนภายในรายการโดยเฉพาะอย่างยิ่งกับการเปลี่ยนมิติบางส่วน ..

มันยุ่งเหยิงและไม่สามารถแก้ไขได้ดังนั้นฉันจึงพยายามแก้ไขปัญหานี้ผ่านจาวาสคริปต์แบบง่ายและได้สร้างไลบรารีที่ทำเช่นนั้น - https://github.com/yairEO/listBreaker

หน้าสาธิต

หากคุณสามารถรองรับ CSS Grid น่าจะเป็นวิธีที่สะอาดที่สุดในการสร้างรายการมิติเดียวให้เป็นเค้าโครงสองคอลัมน์พร้อมการตกแต่งภายในที่ตอบสนอง

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>

นี่คือสองบรรทัดหลักที่จะทำให้คุณมีเค้าโครง 2 คอลัมน์

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

วิธีแรกสำหรับอุปกรณ์เคลื่อนที่คือใช้CSS Columnsเพื่อสร้างประสบการณ์สำหรับหน้าจอขนาดเล็กจากนั้นใช้Media Queriesเพื่อเพิ่มจำนวนคอลัมน์ที่จุดพักที่กำหนดไว้ในรูปแบบของคุณ

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>

นี่คือสิ่งที่ฉันทำ

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>