Question

我写了一些代码来从有序列表中删除小数点。这是我的代码：

ol {
  list-style-type: none;
  counter-reset: level1 
}
ol li:before {
  content: counter(level1) " "; 
  counter-increment: level1;
}

它不显示小数点，但显示数字的方向从左到右依次为

7   xxxxx
8   xxxxx
9   xxxxx
10  xxxxx
11  xxxxx

期望的结果：从右到左，如记事本++行号

 7  xxxxx
 8  xxxxx
 9  xxxxx
10  xxxxx
11  xxxxx

我试过css“方向：rtl”但它没有用。关于如何实现这一点的任何想法？非常感谢！

Answer 1

尝试以下解决方案：

＆＃13;

ol {
  list-style-type: none;
  counter-reset: level1;
}
ol li:before {
  content: counter(level1) "."; 
  counter-increment: level1;
  display:inline-block;
  text-align:right;
  min-width:20px;
}

＆＃13;

<ol>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
  <li>Test 1</li>
  <li>Test 2</li>
</ol>

＆＃13;

Answer 2

尝试将这些样式添加到ol li:before - Codepen here

ol li:before {
  content: counter(level1) " "; 
  counter-increment: level1;

/* below CSS added */
  color: red;
  display: inline-block;
  width: 1em;
  margin-left: -1.5em;
  margin-right: 0.5em;
  text-align: right;
  direction: rtl
}

您可以从this good article

开始阅读更多内容

css li：从右到左指示前

2 个答案: