使用CSS来编排编号列表的样式 [英] Using CSS to style a numbered list

问题描述

我需要HTML来产生类似的输出：

 
 1.一些标题
 
 1.1 blah blah 
 
（a）blah blah blah 
 
（b）blah blah 
 
 1.2 blah blah 
 

我相信因为需要圆括号的字母，我不能使用有序列表标签。显然，它可以用一个表，但我宁愿使用CSS。

如果行包装到下一行，它们应该在文本下继续，就像有序列表一样。

/ p>

UPDATE
我尝试了

  OL {
 counter-reset：numeric 
} 
 OL LI OL LI OL {
 counter-reset：latin 
} 
 LI {
 display：block 
} 
 LI：before {
 content：counters（numeric，。）; 
 counter-increment：numeric 
} 
 OL LI OL LI OL LI：before {
 content：（counter（latin，lower-latin））; 
 counter-increment：latin 
} 
  

p>

  xxx 
< ol> 
< li> one 
< ol> 
< li> onedotone< / li> 
< li> onedottwo 
< ol> 
< li> A< / li> 
< / ol> 
< / li> 
< / ol> 
< li>两个< / li> 
< / ol> 
  

产生

 
 xxx 
 1 one 
 1.1 onedotone 
 1.2 onedottwo 
（a）A 
 2 2 
 

$ b b

不幸的是，我的要求和原来的问题完全一样。

1. 在1和2之后需要一个句号，而在1.1和1.2之后不需要句号。


2. 1和1.1不应缩进，并且两者的文本都需要对齐到相同的位置。因此，onedotone这个词需要精确地在一个词之下。


3. （a）需要与词onedottwo对齐，再次需要一个更大的 不是答案，因为它不帮助排列数字后的文本，你得到

    
    1 one 
    1.1 onedotone 
    

   而不是

    
    1. one 
    1.1 onedotone 
    

   这超出了我的CSS功能。

   解决方案

   p>下面是使用< ol> （有序列表）和CSS 计数器。它有一点黑客的感觉，因为期望当一条线缠绕，它不应该从编号下面开始。否则，我觉得这种方法比使用表格手动键入数字（或）要好得多。

   
   
   

   编号和文本之间的一致间距通过设置<$伪元素并将其显示为 display：inline-block c $ width / code>。根据所需的间距，修改 width 。请注意，修改 width 时， margin-left 和 padding-left 也必须相应地修改以保持样式。

   
   
   

   CSS计数器合理地
   
   

     .level1，.level2 ，.level3 {list-style-type：none;}。level1 {counter-reset：level1; / *第一级计数器 - 用于1,2,3 * /}。level2 {counter-reset：level2; / *第二级计数器 - 对于1.1，1.2 * /}。level3 {counter-reset：level3; / *第三级计数器 - 用于（a），（b）* /} li {display：block;} li：not（：last-child）：after， ol：before {content：;显示：block;位置：相对; height：20px; / *这是填充，其中height应该等于所需的行高* / left：0px; top：100％;}。level1，.level2，.level3 {margin：0; padding：0;}。level1> li，.level3> li {padding-left：40px;} li：before {margin-left：-40px; / *以下2个道具用于编号和文本之间的一致间距* / width：40px; display：inline-block;}。level1> li {font-weight：bold;}。level1> li：before，.level1> li * {font-weight：normal;}。level1> li：before {content：counter（level1）。 / *显示当前项目号+点* /计数器增量：level1; / *每次遇到该级别的新元素时增加计数器* /}。level2> li：before {content：counter（level1）。计数器（level2）; / *格式级1计数器+点+级2计数器* /计数器增量：level2;}。 li：before {content：（counter（level3，lower-latin））; / * format（+ level3 counter +）* / counter-increment：level3;}  

    < code>< ol class ='level1'> < li> one< ol class ='level2'> < li>一个点 - 有一些真正很长的文本，当它溢出宽度时，它会环绕到下一行。< / li> < li> one dot two< ol class ='level3'> < li> A< / li> < li> B  - 有一些真正很长的文本，当它溢出宽度时，它会环绕到下一行。< / li> < / ol> < / li> < / ol> < / li> < />< / ol> 
    

/ div>

---

对评论的反馈：

1. {content：\a; white-space：pre;} 技巧不太适用于 inline-block 元素。在我们的例子中，内部的 li 标签是 inline-block （因为上面第二段解释的原因）特殊的把戏不工作。替代方法是插入一个空白填充行，其中 height 等于所需的 line-height 在 li 标签下方。 请注意选择器使用 li：not（：last-child）：之后，因为我们不需要在最后一个 li （如果我们不这样做，我们将在内部 li 结束后有双行空格）。这是一个CSS3选择器，因此可能不适用于较低版本的IE。如果你需要支持这些版本，那么我们需要进一步调整（或更简单的是使用 br ）。




2. 你在这里正确的路径，但：before 伪元素（它有编号）不在元素 class ='level1'。它在 .level1> li ，因此为选择器 .level1>进行 font-weight li：before，.level1> li * 会解决它。正如你已经知道/猜测， .level1> li * 表示第一级 li 下的每个元素。




I need HTML to produce output similar to:

1.     Some title

1.1    blah blah

       (a)    blah blah blah

       (b)    blah blah

1.2    blah blah

I believe that because of the need for parenthesis round the letters that I cannot use the ordered list tag for this. Obviously it can be done with a table, but I'd much rather use CSS. However I'm at a loss as to how to do this.

If lines wrap to the next line, they should continue under the text like an ordered list would.

UPDATE I have tried

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

and HTML such as:

xxx
<ol>
    <li>one
        <ol>
            <li>onedotone</li>
            <li>onedottwo
                <ol>
                    <li>A</li>
                </ol>
            </li>
        </ol>
    <li>two</li>
</ol>

produces this

xxx
    1 one
           1.1 onedotone
           1.2 onedottwo
                  (a) A
    2 two

Unfortunately, my requirements are exactly as stated in the original question. So my CSS fails in these areas.

1. There needs to be a full stop after 1 and after 2 but not after 1.1 and 1.2
2. 1 and 1.1 should not be indented and the text for both of them needs to be aligned to the same place. So the word onedotone needs to be exactly below the word one. Also there needs to be a bigger gap than one space between the number and the text.
3. The (a) needs to line up with the words onedottwo, and again there needs to be a bigger gap than one space between (a) and A.

padding-left is not the answer, as it does not help line up the text after the numbers, You get

1 one
1.1 onedotone

instead of

1.     one
1.1    onedotone

This is beyond my CSS capabilities. Unless anyone has the expertise to point me in the right direction, I fear that I will have to fall back on using a table.

解决方案

Below is a sample on how the desired result can be achieved using <ol> (ordered lists) and CSS counters. It has a bit of a hack-ish feel about it because of the expectation that when a line is wrapped around, it should not start from under the numberings. Otherwise, I feel this method is much better than manually keying in the numbers (or) using tables.

Consistent spacing between the numbering and text is obtained by setting a width to the li:before pseudo-element and making its display as display: inline-block. Modify the width based on how much spacing is required. Note that when modifying the width, the margin-left and padding-left also have to be modified accordingly to maintain the styling.

CSS Counters have reasonably good browser support also.

.level1, .level2, .level3 {
    list-style-type: none;
}
.level1 {
    counter-reset: level1; /* first level counter - for 1, 2, 3 */
}
.level2 {
    counter-reset: level2; /* second level counter - for 1.1, 1.2 */
}
.level3 {
    counter-reset: level3; /* third level counter - for (a), (b) */
}
li {
    display: block;
}
li:not(:last-child):after, li > ol:before{
    content: " ";
    display: block;
    position: relative;
    height: 20px; /* this is filler where height should be equal to required line height */
    left: 0px; top: 100%;
}
.level1, .level2, .level3 {
    margin: 0;
    padding: 0;
}
.level1 > li, .level3 > li {
    padding-left: 40px;
}
li:before {
    margin-left: -40px;
    /* following 2 props are for consistent spacing between numbering and text */
    width: 40px;
    display: inline-block;
}
.level1 > li{
    font-weight: bold;
}
.level1 > li:before, .level1 > li * {
    font-weight: normal;
}
.level1 > li:before {
    content: counter(level1)"."; /* display current item number + dot */
    counter-increment: level1; /* increment counter everytime a new element of that level is encountered */
}
.level2 > li:before {
    content: counter(level1)"." counter(level2); /* format level 1 counter + dot + level 2 counter */
    counter-increment: level2;
}
.level3 > li:before {
    content: "(" counter(level3, lower-latin)") "; /* format ( + level3 counter + ) */
    counter-increment: level3;
}

<ol class='level1'>
    <li>one
        <ol class='level2'>
            <li>one dot one - has some really really lengthy text which wraps around to the next line when it overflows the width.</li>
            <li>one dot two
                <ol class='level3'>
                    <li>A</li>
                    <li>B - has some really really lengthy text which wraps around to the next line when it overflows the width.</li>
                </ol>
            </li>
        </ol>
    </li>
    <li>two - has some really really lengthy text which wraps around to the next line when it overflows the width.</li>
</ol>

---

Feedback to comments:

1. The {content: "\a"; white-space: pre;} trick does not quite work with inline-block elements. The inner level li tags are inline-block in our case (for reasons explained above in 2nd paragraph) and hence that particular trick doesn't work. The alternate is to insert a blank filler line with height of the line equal to the required line-height and position it below the li tag. Note that the selector used is li:not(:last-child):after because we don't need an extra line break after the last li (if we do not do it, we will have double line space after the inner li ends). This is a CSS3 selector and so might not work with lower versions of IE. If you need to support those versions also then we would need to tweak it further (or simpler would be to use br).

2. You were on the correct path here, but the :before pseudo-element (which has the numbering) is not on the element with class='level1'. It was on the .level1 > li and hence doing a reset of font-weight for selector .level1 > li:before, .level1 > li * would fix it. As you would have already known/guessed, .level1 > li * means every element under the level one li.

这篇关于使用CSS来编排编号列表的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！