首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >需要带括号的下罗马字母列表

需要带括号的下罗马字母列表
EN

Stack Overflow用户
提问于 2012-05-10 11:37:19
回答 2查看 2.2K关注 0票数 2

我需要在css的帮助下生成这样的输出...

(i)需求是什么?

(ii)针对哪个部分?

(iii)考虑到创新...

(iv)考虑到创新...

...and等等。

请提个建议。

EN

回答 2

Stack Overflow用户

发布于 2012-05-10 11:52:39

您可以使用counter-increment属性.write来实现这一点,如下所示:

代码语言:javascript
运行
复制
ul{
    counter-reset:item;
    list-style:none;
}
li:before        {
    content: "("counter(item, lower-roman) ")";
    counter-increment: item;
}

检查此http://jsfiddle.net/MEBxA/

这是工作到IE8及以上。

票数 6
EN

Stack Overflow用户

发布于 2012-05-10 12:23:34

通常,当您想要与使用list-style-type就可以实现的编号样式有任何不同的编号时,基本上有两种选择:

  1. 使用list-style: none抑制默认编号,并使用计数器、生成的内容和:before伪元素生成编号(就像在sandeep的and中一样,可以使用服务器端技术生成这些编号。要么取消ul的默认编号,要么(稍微安全一点)根本不使用ul标记,而是使用div元素或table标记。

后一种方法的最简单示例:

代码语言:javascript
运行
复制
(i) What is the demand?<br>
(ii) For what segment(s)?<br>
…

为了使整个列表、其项目和数字的呈现更容易样式化,最好使用更详细的标记,最好这样做:

代码语言:javascript
运行
复制
<div class=ol>
<div class=li><span class=num>(i)</span> What is the demand?</div>
<div class=li><span class=num>(ii)</span> For what segment(s)?</div>
…
</div>

(使用blockquote而不是div作为最外层的标记将极大地改善回退,即非CSS呈现,但它可能会引起“语义错误”标记的指责。)

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10527186

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档