我已经删除了后面的点(.)<li> of <ol>并给出了“|”在号码之后。
我通过使用下面的代码实现了它：
ol {
counter-reset: item;
}
ol li::before {
content: counter(item) " ";
counter-increment: item;
padding-right: 15px;
border-right: 2.5px solid rgba(37, 194, 240, 0.8);
margin-right: 15px;
}
但数字后面的空格不相等。
我需要数字后均匀的间距。
请帮我解决这个问题。
ol{counter-reset: item;columns: 2;}
ol li{display:block;margin-bottom:10px;}
ol li::before {
content: counter(item) " ";
counter-increment: item;
padding-right: 15px;
border-right: 2.5px solid rgba(37, 194, 240, 0.8);
margin-right: 15px;
}
<ol>
<li>My abc</li>
<li>LiveColor</li>
<li>LiveFood</li>
<li>Ola</li>
<li>Uber</li>
<li>Good Chat</li>
<li>Food Panda</li>
<li>Domino'd</li>
<li>Clickfood</li>
<li>Smartyo</li>
<li>Tide</li>
<li>Webseries</li>
<li>GoPro</li>
<li>Liveshow</li>
</ol>
除此之外，字体系列是这样一种方式，即所有数字都有不同的空格。
您可以尝试表格布局，而无需设置固定宽度，无论您使用多少数字，它都可以工作。
ol {
counter-reset: item;
columns: 2;
}
ol li {
display: table-row;
}
ol li::before {
display:table-cell;
/*text-align:right; uncomment this if you want to align to the right */
content: counter(item) " ";
counter-increment: item 99;
padding-right: 30px;
padding-bottom: 10px;
/* we use background instead of border */
background: linear-gradient(rgba(37, 194, 240, 0.8),rgba(37, 194, 240, 0.8))
right 15px top 0/ /* right=padding right*/
2.5px calc(100% - 10px) /* width=2.5px height=100% - padding bottom */
no-repeat;
}
<ol>
<li>My abc</li>
<li>LiveColor</li>
<li>LiveFood</li>
<li>Ola</li>
<li>Uber</li>
<li>Good Chat</li>
<li>Food Panda</li>
<li>Domino'd</li>
<li>Clickfood</li>
<li>Smartyo</li>
<li>Tide</li>
<li>Webseries</li>
<li>GoPro</li>
<li>Liveshow</li>
</ol>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
