从上到下而不是从左到右列出列中的项目答案

【问题标题】：List items in columns from top to bottom instead of left to right从上到下而不是从左到右列出列中的项目
【发布时间】：2015-02-10 08:15:07
【问题描述】：

我有一个按字母顺序排列的国家/地区列表，例如：

Albania
Andorra
Armenia
Austria
Azerbaijan
Belarus
Belgium
Bosnia and Herzegovina
Bulgaria
Croatia
Cyprus
Czech Republic
Denmark
Estonia
Finland
France
Georgia
Germany
Greece
...

我将它们显示在列表中：

<ul class="mylist">
  <li>Albania</li>
  <li>Andorra</li>
  <li>Armenia</li>
  <li>Austria</li>
  <li>Azerbaijan</li>
  ...
</ul>

该列表在大型显示器上显示 4 列：

ul.mylist li {
    float: left;
    width: 25%;
}

和 2 在小型显示器上：

ul.mylist li {
    float: left;
    width: 50%;
}

这会产生一个类似（大显示）的列表：

Albania     Andorra  Armenia  Austria
Azerbaijan  Belarus  Belgium  Bosnia and Herzegovina
Bulgaria    Croatia...

好的，现在进入棘手的部分：显示的国家/地区数量可能因过滤器选项而异。我想以其他方式（从上到下，从左到右）对国家进行排序，如下所示：

Albania     Bosnia and Herzegovina Finland   [4th col]
Andorra     Bulgaria               France    ...
Armenia     Croatia                Georgia
Austria     Cyprus                 Germany
Azerbaijan  Czech Republic         ...
Belarus     Denmark
Belgium     Estonia

如何记住 CSS 会在小型显示器上将列表折叠为 2 列？

【问题讨论】：

目前还没有，但如果这能带来优势，我可能会。

标签： html css responsive-design multiple-columns

【解决方案1】：

为此使用CSS3 multi-column layout。 Browser support is questionable 所以请使用供应商前缀。

ul {
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
  width: 100%;
}
/* default */
ul {
     -moz-column-count: 4;
  -webkit-column-count: 4;
          column-count: 4;
}
/* < 800px */
@media screen and (max-width: 799px) {
  ul {
       -moz-column-count: 3;
    -webkit-column-count: 3;
            column-count: 3;
  }
}
/* < 400px */
@media screen and (max-width: 399px) {
  ul {
       -moz-column-count: 2;
    -webkit-column-count: 2;
            column-count: 2;
  }
}

<ul>
  <li>Albania</li>
  <li>Andorra</li>
  <li>Armenia</li>
  <li>Austria</li>
  <li>Azerbaijan</li>
  <li>Belarus</li>
  <li>Belgium</li>
  <li>Bosnia and Herzegovina</li>
  <li>Bulgaria</li>
  <li>Croatia</li>
  <li>Cyprus</li>
  <li>Czech Republic</li>
  <li>Denmark</li>
  <li>Estonia</li>
  <li>Finland</li>
  <li>France</li>
  <li>Georgia</li>
  <li>Germany</li>
  <li>Greece</li>
</ul>

【讨论】：

【解决方案2】：

只是为了从 Salman A 的答案中说清楚（我只有在阅读此 post 的第三个解决方案时才理解他的答案 - “文本列”之一），更改 li 的代码的主要部分从左到右从上到下的顺序是：

ul {
  column-count: 4;
  column-gap: 0;
}
li {
  display: inline-block;
}

Salman 中的其他一切答案是针对大/小屏幕进行调整

【讨论】：