将列表项目从上到下以列的形式显示，而不是从左到右。

Question

我有一个按字母顺序排列的国家列表，如下：

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的效果？

- Werner

---

目前还没有，但如果这样做有优势的话，我可能会考虑。 - Werner

Answer 1

使用CSS3多列布局实现。由于浏览器支持不确定，请使用供应商前缀。CSS3多列布局浏览器支持情况

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>

- Salman A

Answer 2

为了明确 Salman A 的答案（我只有在阅读这个帖子的第三个解决方案——“文本列”之后才理解他的答案），将 li 顺序从左到右改为从上到下的代码主要部分是：

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

Salman A的答案中其它的东西都是为了适应大/小屏幕做出的调整。

- MagTun