如何在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://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中将不起作用;只有两个子弹) 有明确的子弹数量有上限,所以我认为根据需要复制和粘贴多少次是可以接受的. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |