2

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

(i) 需求是什么？

(ii) 针对哪些细分市场？

(iii) 鉴于创新...

(iv) 鉴于创新...

...等等。

请建议。

4

2 回答 2

6

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

ul{
    counter-reset:item;
    list-style:none;
}
li:before        {
    content: "("counter(item, lower-roman) ")";
    counter-increment: item;
}

检查这个http://jsfiddle.net/MEBxA/

它可以工作到 IE8 及更高版本。

于 2012-05-10T03:52:38.550 回答
1

通常，当您想要的编号方式与简单地使用 可以实现的编号样式有任何不同时list-style-type，您基本上有两种选择：

  1. 抑制默认编号list-style: none并使用计数器、生成的内容和:before伪元素生成数字（如桑迪普的答案）。
  2. 在内容中包含数字，可以使用服务器端技术来生成它们。要么抑制默认编号，ul要么（更安全一些）根本不使用ul标记，但例如div元素或table标记。

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

(i) What is the demand?<br>
(ii) For what segment(s)?<br>
…

为了便于对整个列表、项目和数字的呈现进行样式设置，最好使用更详细的标记，可能达到以下效果：

<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 渲染，但它可能会导致“语义错误”标记的指责。）

于 2012-05-10T04:23:34.460 回答