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

Question

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

注意带有子弹点和段落编号的灰线.子弹应该在页面上居中,数字应该是正确的.

我一直在试着想一想如何在HTML中做到这一点并且空白.你会如何捕获这种格式？

Answer 1

你可以在这里使用:before和:afterpsuedo元素产生很好的效果:

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中不起作用;只会有两个子弹)

有一个合理的子弹数量有一个上限,所以我认为根据需要复制和粘贴它是可以接受的.

Answer 2

这样的事怎么样？

http://jsfiddle.net/6eTCf/

<div class="separator">
   * <div class="page_number">1</div>
</div>


.separator{
    margin: 5px 0 5px 0;
    color:gray;
    position:relative;  
    text-align: center;
}

.page_number{
    position:absolute;
    right: 3px; 
    top: 0; 
}

Answer 3

我将数字向右浮动并将剩余内容（项目符号点）居中。如果您给其余内容的左右边距大于数字的宽度，则内容将居中。