如何使文本居中,而不是HTML有序列表的数字标签

如何使文本居中,而不是HTML有序列表的数字标签,第1张

概述我正在为一个以相反顺序列出步骤的页面创建一个小部件.我计划使用ol并在各个li标签上设置value属性以强制ol的编号被反转.到现在为止还挺好.但是,我有一个设计难题,我不确定可以用css解决.使用此标记,是否可以使文本居中但保持标签左对齐?<ol> <li value='5'>item 5</li> &l

我正在为一个以相反顺序列出步骤的页面创建一个小部件.我计划使用ol并在各个li标签上设置value属性以强制ol的编号被反转.到现在为止还挺好.

但是,我有一个设计难题,我不确定可以用CSS解决.

使用此标记,是否可以使文本居中但保持标签左对齐?

这是一张图片来说明我追求的文字处理.

如果我不得不在我的标记中为ol自动执行的 *** 作增加额外的跨度,那将是一种耻辱.

最佳答案您可以反转计数器,然后可以将计数器与文本分开对齐.

虽然不是ie7,但是它的默认值(内置的IE黑客取回默认值)

CSS:

ol {    padding: 0;    margin: 0;    List-style-type: decimal !ie7;    margin-left: 20px !ie7;    counter-reset:item 6; /* one higher than you need */    wIDth: 250px;    border: 1px solID #000;}ol > li {    counter-increment:item -1;    text-align: center;}ol > li:before {    content:counter(item) ". ";    float: left;    wIDth: 30px; background: #eee;}

HTML

总结

以上是内存溢出为你收集整理的如何使文本居中,而不是HTML有序列表的数字标签全部内容,希望文章能够帮你解决如何使文本居中,而不是HTML有序列表的数字标签所遇到的程序开发问题。

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

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1125631.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-30
下一篇 2022-05-30

发表评论

登录后才能评论

评论列表(0条)