阿拉伯语的订购列表不起作用

Question

我需要按顺序在订单列表中显示数据。例1,2,3,3.1,3.2,4 ......

当我使用下面的CSS时，它会以正确的顺序显示英语的内容表，如果我必须用阿拉伯语显示类似的东西，那么它在阿拉伯语中不起作用。它与numbers.each do |element| element.to_i end 一起使用时显示阿拉伯数字，但后来我丢失了格式ul

3.1, 3.2....

如何格式化订单列表以将有序列表中的内容列表显示为

1. 1
2. 2
3. 3
4. 3.1
5. 3.2
6. 3.3
7. 4
8. 5

https://jsfiddle.net/rkmv3rn3/

Answer 1

ol的编号实际上是使用计数器而非默认列表样式完成的。因此，计数器的编号样式应设置为arabic-indic（无前缀版本），而不是list-style-type。

代码段的关键部分是我们设置样式的下面一行。计数器函数中的第三个参数是编号的样式（第一个是计数器名称，第二个是分隔符）。

content: counters(item, ".", arabic-indic)" ";

＆＃13;

＆＃13;

ul {
  direction: rtl;
  list-style-type: arabic-indic;
}
.handbook-page ol {
  color: #687074;
  counter-reset: item;
}
ol {
  list-style-type: arabic-indic;
  direction: rtl;
  counter-reset: item;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counters(item, ".", arabic-indic)" ";
  counter-increment: item;
  font-weight: bold;
}

＆＃13;

<div>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>
<h1>LIST OL </h1>
<div class="page-content">
  <ol>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ol>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ol>
    <li><a href="#about">About</a>
    </li>
  </ol>
</div>
<h1>LIST UL </h1>
<div class="page-ul">
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ul>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ul>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

用于在阿拉伯语中显示输出为1.3,2.3,3.3而不是3.1,3.2,3.3（对于第三个li的子项），似乎无法使用自嵌套计数器，因为数字总是得到附加而不是在前面添加。如果需要，我们必须为lis的每个级别使用不同的计数器，然后在前面手动添加子计数器的值，如下面的代码段所示。

＆＃13;

＆＃13;

ul {
  direction: rtl;
  list-style-type: arabic-indic;
}
.page-content > ol {
  direction: rtl;
  counter-reset: item-level1, item-level2;
  color: #687074;
}
.page-content > ol > ol{
  direction: rtl;
  counter-reset: item-level2;
  color: #687074;
}
ol li {
  display: block;
  padding: 5px 0;
}
.page-content > ol li{
  counter-increment: item-level1;
}
.page-content > ol > ol li{
  counter-increment: item-level2;
}
ol li a {
  text-decoration: none;
  color: #687074;
  padding-left: 10px;
}
ol li:before {
  content: counter(item-level1, arabic-indic)" ";
  font-weight: bold;
}
ol ol li:before {
  content: counter(item-level2, arabic-indic) "." counter(item-level1, arabic-indic)" ";
  font-weight: bold;
}

＆＃13;

<div>
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>
<h1>LIST OL </h1>
<div class="page-content">
  <ol>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ol>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ol>
    <li><a href="#about">About</a>
    </li>
  </ol>
</div>
<h1>LIST UL </h1>
<div class="page-ul">
  <ul>
    <li><a href="#home">Home</a>
    </li>
    <li><a href="#news">News</a>
    </li>
    <li><a href="#contact">Contact</a>
    </li>
    <ul>
      <li><a href="#home">Sub menu</a>
      </li>
      <li><a href="#news">Sub menu</a>
      </li>
      <li><a href="#contact">Sub menu</a>
      </li>
      <li><a href="#about">Sub menu</a>
      </li>
    </ul>
    <li><a href="#about">About</a>
    </li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;