如何在HTMLCSS中执行制表位

概述有一些我想用 HTML格式化的文本.这是一个图像： 注意带有项目符号和段落号码的灰色线条.子d应以页面为中心,数字应正确对齐. 我一直试图想到在HTML中如何做到这一点,而且空白.您将如何捕获此格式？ 你可以使用：before和：after psuedo-elements在这里效果很好： http://jsfiddle.net/yNnv4/1/ 这将适用于所有现代浏览器和IE8.如果需要IE7支持 有一些我想用 HTML格式化的文本.这是一个图像：

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

我一直试图想到在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: '22 22';    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: '22' }p+p:before { content: '22 22' }p+p+p:before { content: '22 22 22' }/* .... */

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

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

总结

以上是内存溢出为你收集整理的如何在HTML / CSS中执行制表位全部内容，希望文章能够帮你解决如何在HTML / CSS中执行制表位所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。