使用 CSS 在有序列表中右对齐合法样式的数字和左对齐文本答案

【问题标题】：Right-align legal-styled numbers and left-align text in ordered lists using CSS使用 CSS 在有序列表中右对齐合法样式的数字和左对齐文本
【发布时间】：2011-03-28 12:23:28
【问题描述】：

在撰写文档时，我使用有序列表中的有序列表创建了一个大纲，并使用 CSS 应用了伪法律样式的行编号。列表的默认行为是右对齐数字和左对齐文本；然而，我正在使用的 CSS2 sn-p 正在改变这种行为，以便数字左对齐和文本，尽管左对齐流动不正确。请参阅以下示例：

默认行为（数字 10 突出显示所需的对齐方式）：

 1. Item
 2. Item
    1. Item
    2. Item
       1. Item
       2. Item
 3. Item
 ...
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc et diam sem.   Pellentesque vitae dolor id eros commodo 
    dapibus tristique sit amet eros. Pellentesque turpis turpis.

风格化的行为（数字 10 突出显示不受欢迎的对齐方式）：
使用来自http://www.w3.org/TR/CSS2/generate.html的派生CSS2 sn-p

OL { counter-reset: item }
LI { display: block }
LI:before { content: "("counters(item, ".") ") "; counter-increment: item }

结果：

 (1) Item
 (2) Item
     (2.1) Item
     (2.2) Item
           (2.2.1) Item
           (2.2.2) Item
 (3) Item
 ...
 (10) Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Nunc et diam sem.   Pellentesque vitae dolor id eros commodo 
 dapibus tristique sit amet eros. Pellentesque turpis turpis.

我看到LI { display: block } 正在取消默认编号，LI:before 正在使用计数器值作为“普通”文本的前缀。我怎样才能同时拥有合法风格的编号以及所需的数字和文本对齐方式？

这是显示问题的完整文档：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Outline</title>
<style type="text/css">
ol {
counter-reset: item;
list-style-position: outside
}
li {
display: block;
padding-left: 10px;
}
li:before {
content: "("counters(item, ".") ") ";
counter-increment: item
}
</style>
</head>

<body>
<h1>Outline</h1>
<ol>
  <li>Item</li>
  <li>Item
    <ol>
      <li>Item</li>
      <li>Item
        <ol>
          <li>Item</li>
          <li>Item</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc et diam sem.   Pellentesque vitae dolor id eros commodo 
    dapibus tristique sit amet eros. Pellentesque turpis turpis.</li>
</ol>
</body>
</html>

【问题讨论】：

标签： html css html-lists

【解决方案1】：

一个有点尴尬的解决方案可能是：

ol {
    width: 10em;
    counter-reset: item;
    list-style-position: outside;
}

li {
    position: relative;
    left: 2em;
    display: block;
    list-style-position: outside;
}

li:before {
    content: "("counters(item, ".") ") ";
    counter-increment: item;
    position: absolute;
    left: -2.5em;
}

li li:before {
    left: -2.5em;
}

li li li:before {
    left: -3em;
}

这只是使用position: relative; 允许li 文本向右移动（left: 2em;），同时绝对定位li:before 文本并将其向左移动。

尴尬的部分来自必须为li:before、li li:beforeandli li li:before 指定不同的left: 值，所以它并不像想象的那么简单。

有一个我想出的演示：http://jsbin.com/asaru3

编辑响应来自 OP 的 cmets：

谢谢，我相信我了解它的工作原理。要继续这个模式，我必须为一个 4 层深的列表创建“li li li li”，对吗？另外，我看不到这些数字是左对齐的。有没有办法获得这些价值并对它们应用类似的重新定位或对齐？

我的意思是数字不是右对齐的。

对于第一个问题，“要继续这种模式，我必须为列表创建“li li li [li:before]”... 4 级深度？”是的，这是我认为的原因之一这是一个尴尬的解决方案。尽管它确实有效。

为了解决后一个问题，我相信您希望数字沿右边缘对齐？

如果你修改li:before的css：

li:before {
    content: "("counters(item, ".") ") ";
    counter-increment: item;
    position: absolute;
    left: -2.5em;
    display: block;
    width: 2em; /* to give the same dimensions to all counter 'blocks' */
    text-align: right; /* does exactly what you'd think =) */
}

使用这种方法，请记住li:before 的内容大小必须小于li 的left: 定位，否则会出现计数器和内容重叠。

请注意，随着计数器大小的增加，其宽度也应像以前一样针对li li:before、li li li:before 进行修改。

演示地址：http://jsbin.com/ovuru3

【讨论】：

谢谢，我相信我明白它是如何工作的。要继续这个模式，我必须为一个 4 层深的列表创建“li li li li”，对吗？另外，我看不到这些数字是左对齐的。有没有办法获得这些价值并对它们应用类似的重新定位或对齐？
再次感谢。我刚刚购买了一本强烈推荐的关于 CSS 的书，并且拥有一些很好的资源，但是没有什么比让专业人士提供一个很好的例子更重要了。
...或者在这种情况下是热情的业余爱好者，但谢谢！当然，欢迎您 =)