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.

Styled behavior (Number 10 highlights the undesirable alignments):
Using a derived CSS2 snippet from http://www.w3.org/TR/CSS2/generate.html

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.

页: 1 Li{显示:栏目<>/代码>正在压制缺省编号和LI: 预先确定具有反值的“正常”文本。我如何能够有法律型编号,并期望数字和案文的一致?

The following a full document show the issue:

<!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;
}

仅使用<条码>:相对;允许将<条码>li案文移至右边(<条码>:2em;>,同时将<条码:绝对文本移至左边。

awkward part from have to specified different left: <代码>li:之前, li :andli 页: 1

http://jsbin.com/asaru3“rel=“nofollow noreferer”http://jsbin.com/asaru3。

Edited in response to comments from OP:

感谢,我认为我理解这项工作如何。为了继续这种模式,我不得不为一份4级深厚、正确的名单创造“li li li”? 而且,我看不出这些数字是左翼。是否有办法达到这些价值,并实行类似的重新定位或与它们相匹配?

我指的是数字是NOT右翼。

对第一个问题来说,为了继续这一模式,我不得不为一份清单创造“li li li li [li: before]”。 Yeah是我认为它是一个无益的解决办法的原因之一。虽然有does工作。

为了解决后一个问题,我认为,你希望这些数字能够跟上正确的方向?

如果您修订<代码>li:的标的:

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:的大小。不得低于<代码>left:的定位li,否则,对应和内容将出现重叠。

如前所述,由于柜台的体积越大,其宽度也应修订如下:li li :之前,li li li li :。

Demo at:http://jsbin.com/ovuru3

友情链接