为了账号安全,请及时绑定邮箱和手机立即绑定

带右括号的有序列表(HTML)下字母?

带右括号的有序列表(HTML)下字母?

动漫人物 2019-11-26 14:31:20
有序列表的默认低字母列表类型使用点“。”。有没有办法使用右括号代替a)... b)..etc?
查看完整描述

3 回答

?
达令说

TA贡献1821条经验 获得超6个赞

这是一个整洁的解决方案。(老实说,这让我感到惊讶。)CSS有一个叫做counters的东西,您可以在其中设置每个标题的自动章节编号。进行一些修改可以为您提供以下内容;您需要自己整理填充等。


ol {

  counter-reset: list;

}

ol > li {

  list-style: none;

}

ol > li:before {

  content: counter(list, lower-alpha) ") ";

  counter-increment: list;

}

<span>custom list style type (v1):</span>

<ol>

  <li>Number 1</li>

  <li>Number 2</li>

  <li>Number 3</li>

  <li>Number 4</li>

  <li>Number 5</li>

  <li>Number 6</li>

</ol>

适用于所有现代浏览器和IE9 +(可能是IE8,但可能有问题)。


更新:我添加了子选择器,以防止嵌套列表采用父样式。trejder在注释中也很不错,因为列表项的对齐方式也被弄乱了。456bereastreet上的文章提供了一个很好的解决方案,其中涉及绝对定位计数器。


ol {

    counter-reset: list;

}

ol > li {

    list-style: none;

    position: relative;

}

ol > li:before {

    counter-increment: list;

    content: counter(list, lower-alpha) ") ";

    position: absolute;

    left: -1.4em;

}

<span>custom list style type (v2):</span>

<ol>

  <li>Number 1</li>

  <li>Number 2</li>

  <li>Number 3</li>

  <li>Number 4</li>

  <li>Number 5</li>

  <li>Number 6</li>

</ol>


查看完整回答
反对 回复 2019-11-26
  • 3 回答
  • 0 关注
  • 1036 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信