Question

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

默认行为（数字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代码段

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>

Answer 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文本并将其移到左侧。

尴尬的部分来自于必须为left:指定不同的li:before值，li li：在and li li li：before之前，所以它不是那么简单是

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

<小时/> 已编辑以回应OP的评论：

谢谢，我相信我明白这是如何运作的。为了继续这种模式，我必须创建“li li li li”以获得4级深度的列表，对吗？另外，我没有看到数字是左对齐的。有没有办法获得这些值并对它们应用类似的重新定位或对齐？

我的意思是数字不对齐。

对于第一个问题'继续这种模式，我必须创建“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的内容大小必须小于left:的{{1}}位置，否则计数器会重叠内容。

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

演示于：http://jsbin.com/ovuru3

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

1 个答案: