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

学习

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

当我使用以下CSS时,它会以正确的顺序显示英语的目录,如果我必须用阿拉伯语显示类似的内容,则它在阿拉伯语中不起作用。当我使用阿拉伯数字时,它会显示阿拉伯数字,ul但随后会丢失格式3.1, 3.2....

ol li:before { content: counters(item, ".") " "; counter-increment: item; font-weight:bold; }

如何格式化订单列表以将目录显示为

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

https://jsfiddle.net/rkmv3rn3/

哈里

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

片段代码的关键部分是我们设置样式的下一行。计数器功能中的第三个参数是编号的样式(第一个是计数器名称,第二个是分隔符)。

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

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;
}
<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>


为了将输出显示为阿拉伯语的1.3、2.3、3.3而不是3.1、3.2、3.3(针对Third的子项li),似乎无法使用自嵌套计数器,因为该数字始终会被追加,而不是在前面添加。如果需要,我们必须为lis的每个级别使用不同的计数器,然后像下面的代码片段一样在前面手动添加子计数器的值。

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;
}
<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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

iOS阿拉伯语Pushnotification

来自分类Dev

iOS阿拉伯语Pushnotification

来自分类Dev

笔尖镜像阿拉伯语

来自分类Dev

Redis阿拉伯语解码

来自分类Dev

自定义键盘变体(用于阿拉伯语音译)不起作用

来自分类Dev

如何从右到左更改特定列表项文本(例如阿拉伯语/希伯来语)?

来自分类Dev

CLDR阿拉伯语区域设置中的奇怪列表模式格式

来自分类Dev

在列表中使用阿拉伯语unicode编写CSV文件

来自分类Dev

在数据库中保存字符串的阿拉伯语列表

来自分类Dev

阿拉伯语的PHP Hashtag不能是链接

来自分类Dev

连接从左到右和从右到左的语言(阿拉伯语等)

来自分类Dev

在python中导入阿拉伯语Wordnet

来自分类Dev

如何在日食中用阿拉伯语读写

来自分类Dev

使用codeigniter插入和选择阿拉伯语

来自分类Dev

iOS 7复数+阿拉伯语

来自分类Dev

来自阿拉伯语的PHP Curl编码

来自分类Dev

UITextview显示文本阿拉伯语但数字英语

来自分类Dev

mysql&UTF8阿拉伯语问题

来自分类Dev

在xcode上反向复制阿拉伯语?

来自分类Dev

Excel不能另存为阿拉伯语

来自分类Dev

阿拉伯语未正确进行urlencoding

来自分类Dev

在PHP中搜索并替换阿拉伯语

来自分类Dev

Java AES不解密阿拉伯语

来自分类Dev

android-阿拉伯语语音识别

来自分类Dev

阿拉伯语单词如何与“ tashkel”匹配?

来自分类Dev

阿拉伯语正则表达式

来自分类Dev

Rails 4.1.2 json阿拉伯语支持

来自分类Dev

CSS的阿拉伯语HTML布局方向

来自分类Dev

如何用html写阿拉伯语段落?