如何将一个 <ul> 列表显示为无限列？ [复制]答案

【问题标题】：How to display one <ul> list into unlimited columns? [duplicate]如何将一个 <ul> 列表显示为无限列？ [复制]
【发布时间】：2021-10-07 15:39:05
【问题描述】：

我正在使用 Django 作为后端，我想在无限列中显示下面的 ul 并使用 overflow-x : auto。

<ul class="list">
  {% for i in skills %}
    <li>{{i}}</li>
  {% endfor %}
</ul>

样本输出：

1 7  . . . 
2 8  . . .
3 9  . . .
4 10 . . .
5 11 . . .
6 12 . . .

【问题讨论】：

我认为您可以为列运行另一个外部 for 循环。
总是 6 行？ ..
@TemaniAfif ，重复的答案缺少溢出要求；）（问题的一部分）

标签： javascript html jquery css django

【解决方案1】：

你可以使用网格

ol {
  display:grid;
  grid-template-rows:repeat(6,auto);
  grid-auto-flow:column;
  grid-auto-columns:100px;/* need here to set a value so it can do next rule*/
  overflow:auto;
}

<ol>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
  <li>li</li>
</ol>

【讨论】：