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

发布时间：2020-12-14 23:15:42 所属栏目：资源来源：网络整理

导读：我正在为一个以相反顺序列出步骤的页面创建一个小部件.我计划使用ol并在各个li标签上设置value属性以强制ol的编号被反转.到现在为止还挺好. 但是,我有一个设计难题,我不确定可以用css解决. 使用此标记,是否可以使文本居中但保持标签左对齐？这是一张图片来

我正在为一个以相反顺序列出步骤的页面创建一个小部件.我计划使用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



                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!