如何在HTML / CSS中执行制表位

前端之家收集整理的这篇文章主要介绍了如何在HTML / CSS中执行制表位前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有一些我想用 HTML格式化的文本.这是一个图像:

注意带有项目符号和段落号码的灰色线条.子弹应以页面为中心,数字应正确对齐.

我一直试图想到在HTML中如何做到这一点,而且空白.您将如何捕获此格式?

解决方法

你可以使用:before和:after psuedo-elements在这里效果很好:

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
}

关于柜台属性

> 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' }
/* .... */

(或者,可以以相同的方式重复第n个孩子:http://jsfiddle.net/N4txk/ – 但是在IE8中将不起作用;只有两个子弹)

有明确的子弹数量有上限,所以我认为根据需要复制和粘贴多少次是可以接受的.

猜你在找的HTML相关文章