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


82

有序列表的默认低字母列表类型使用点“。”。有没有办法像a)... b)那样使用右括号?


3
也许答案之一可以被认为是正确的?...
Takit Isy

Answers:


162

这是一个整洁的解决方案。(老实说,我对此感到惊讶。)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>

这是一个显示结果的jsFiddle,包括嵌套列表。


1
没错,这在IE6中不起作用。但好消息是它可以在Firefox 3.5.3上运行。
mouviciel

1
实际上,如果:ol {counter-reset:list; }当有多个OL时,原始的将不起作用。
Jfly 2012年

1
仅供参考,要获取编号列表而不是字母列表,只需删除即可, lower-alpha。因此,content值应为counter(list) ") ";
Trevan Hetzel

1
我只补充一点,这不是100%的实数。您可以看到多行项目之间的差异。在普通列表(使用标准项目符号或数字)中,每行都有相同的缩进,因此项目符号或数字看起来像站在文本块之前。与上述方案中,每个下一个下面的编号线启动和不稍微插入。但这并没有改变事实,那就是这确实是一种巧妙的解决方案!:>
trejder 2014年

加:这在多级列表上完全失败(我的示例在jsFiddle)。
trejder 2014年

11

基于DisgruntledGoat的答案,我根据需要扩展了它以支持子列表和样式。在这里分享它,以防有人帮忙。

https://jsfiddle.net/0a8992b9/输出:

(i)first roman
    (a)first alpha
    (b)second alpha
    (c)third alpha
    (d)fourth alpha
(ii)second roman
(iii)third roman
    (a)first alpha
    (b)second alpha

1
+1您重置了Alpha版。那对我很有帮助。非常感谢。如果某人没有alpha类,则可以使用ol [style * =“ list-style-type:lower-alpha;”]
SK。

有没有办法在使文字保持在所用字母右侧(而不是项目符号点的位置)的同时呢?例如,没有将文本换行到字母下面(例如a)),而是换回到文本开始于特定字母点的位置,就像常规的<li>看起来一样
sabliao

@sabliao用于增加负值text-indentli水平
泰勒詹姆斯年轻

3

将其添加到CSS中可获得一些有趣的结果。它很近,但是没有雪茄。

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

-----编辑为在注释中包含Iazel的解决方案-----

我已经完善了您的解决方案:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

背景和position: absolute窍门!


我已经完善了您的解决方案:li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; } 背景和职位:绝招!:)
Iazel

-9

这适用于IE7,FF3.6,Opera 9.64和Chrome 6.0.4:

<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

这是内联式的,因为它是为电子邮件编码的,但是要点是跨度充当内容块,并将括号放入负的左侧区域,因此与列表编号对齐。这两个边距是为了补偿IE7和FF的差异

希望这可以帮助。


1
您确定不应该这样display:inline-block;吗?
JaredMcAteer

这是一个hack,因为在尝试将括号放置在自动生成的“ a”,“ b”等字符旁边时,它取决于字体大小。如果要执行类似的操作,则应使用list-style-type:none并自己承担渲染整个“ a)”的工作,而不是尝试仅渲染paren。
查尔斯·肯德里克
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.