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屋!