html - 你如何在 HTML/CSS 中做制表位

Question

有些文本的格式我想以 HTML 格式呈现。这是一张图片:

注意带有元素符号和段落编号的灰线。元素符号应位于页面中心，数字应正确对齐。

我一直在想如何在 HTML 中做到这一点，但我还是一片空白。您将如何捕捉这种格式？

Answer 1

你可以在这里使用 :before 和 :after 伪元素来发挥很好的效果:

http://jsfiddle.net/yNnv4/1/

这适用于所有现代浏览器和 IE8+。如果需要 IE7 支持，这个答案不适合你:)

#container {
    counter-reset: nums;
}
p {
    position: relative;
    margin: 21px 0;
}
p:before {
    content: '\2022 \2022';
    font-size: 2em;
    position: absolute;
    top: -8px;
    left: 0;
    line-height: 1px;
    color: #888;
    width: 100%;
    text-align: center
}
p:after {
    content: counter(nums);
    counter-increment: nums;
    font-size: 1.5em;
    position: absolute;
    top: -8px;
    right: 0;
    line-height: 1px;
    color: #888;
    font-family: sans-serif
}

关于counter属性:

• https://developer.mozilla.org/en/CSS_Counters
• http://www.w3.org/TR/CSS21/syndata.html#counter
• http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment

---

不可能(自动)增加元素符号。

但是，可以通过一些可疑的重复来完成:

http://jsfiddle.net/N4txk/1/

p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */

(或者，:nth-child 可以以相同的方式重复:http://jsfiddle.net/N4txk/ - 但在 IE8 中不起作用；只有两个元素符号)

合理的子弹数量有上限，所以我认为可以根据需要复制和粘贴多次。