html - 需要在 ol 列表中右对齐十进制数

标签 html css

我有一个标准的 ol 列表:

1. One
2. Two
10. Ten

有没有办法让十进制数右对齐,使其看起来像这样:

 1. One
 2. Two
10. Ten

编辑:截图。顶部是 Typekt (Proxima Nova) 字体粗细正常。底部是无衬线字体。

唯一相关的样式是:ol { list-style-position: inside; }

最佳答案

默认情况下元素编号不是右对齐的吗?至少它们在 IE 和 Firefox 中:

<ol>
  <li>One</li>
  <li>Two</li>
  <li value="10">Ten</li>
</ol>

更新: 问题在于 (1) list-style-position 设置为 inside,因此元素编号显示为部分元素内容而不是左边距,并且 (2) 您正在使用具有可变宽度数字的字体。

删除 list-style-position: inside 会解决这个问题。你添加它的原因是什么?如果脚注太长以至于需要换行,您希望后续行如何缩进?

关于html - 需要在 ol 列表中右对齐十进制数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10450702/

相关文章:

Galaxy S3 的 CSS 媒体查询

html - 选择框的样式颜色(带有自定义包装器)下拉文本与 css

javascript - 将 HTML 呈现为图像

html - CSS 没有背景图片,有什么想法吗?

javascript - 滚动上多个固定标题

html - 我需要将 3 个 div 在我的页面中心与 flexbox 对齐

html - Mobile Safari - 视口(viewport)设备高度未按预期工作

javascript - jQuery - 使用 HTML 实体转义内联样式

html - 如何使用 Flexbox 居中对齐一个 flex 元素并右对齐另一个 flex 元素

html - 防止 HTML 文本扭曲可点击的覆盖