Flexbox-编号列表< ol>-2列-从上到下的数字 [英] Flexbox - numbered list <ol> - 2 columns - numbers from top to bottom

问题描述

我试图弄清楚如何将编号列表< ol> 分为两列，并从上到下显示数字.

Im trying to figure out how to split numbered list <ol> into 2 columns and show the numbers from top to bottom.

我在这里有一个工作提琴: https://jsfiddle.net/qtr6mjf3/

I've got a working fiddle here: https://jsfiddle.net/qtr6mjf3/

我正在使用50％的 flex 将列拆分为2.

I'm using flex 50% for this to split the columns into 2.

问题在于它现在显示的数字顺序为:

The problem is that it now shows the numbers ordered as:

1-2-
3-4

1 - 2
3 - 4

是否可以对列表项重新排序，所以列表显示为?:

Is it possible to reorder the list items, so the list shows as?:

1-3-
2-4

1 - 3
2 - 4

推荐答案

如果您在ol级别删除 display:flex 并给它一个 column:count ，则您的代码能够做你想做的事.

If you remove display:flex at ol level and give it a column:count, your code is able to do what you are after.

@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
ol {
  list-style: none;
  counter-reset: my-awesome-counter;
  /* display: flex; */
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  column-count: 2;
}

ol li {
  counter-increment: my-awesome-counter;
  display: flex;
  width: 50%;
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

ol li::before {
  content: counter(my-awesome-counter);
  font-weight: bold;
  font-size: 2rem;
  margin-right: 0.5rem;
  font-family: 'Abril Fatface', serif;
  line-height: 1;
}

body {
  padding: 1rem;
  font-family: sans-serif;
}

<ol>
  <li>Lorem ipsum dolor sit amet.</li>
  <li>Tempore nostrum laborum sequi obcaecati.</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Amet odio rerum alias impedit!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
  <li>Illo iusto dolores magnam ratione!</li>
</ol>

column:count 的浏览器支持可在此处.

这篇关于Flexbox-编号列表< ol>-2列-从上到下的数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！