Css 我怎样才能准确地获得虚构文本内容宽度的边距

发布于03月09日

这是我正在处理的一份名单:

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

ol {
  counter-reset: item;
}

li {
  display: block;
}

li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

ol li ol li {
  margin-left: 80px; /* The left margin should have exactly the width of one number and a &emsp; */
}

<ol>
  <li>Coffee
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Tea
    <ol>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ol>
  </li>
  <li>Milk</li>
  <li>Cool</li>
</ol>

这ol li ol li家公司目前有margin-left: 80px;家.现在，可以以例如1.1与Coffee完全左对齐的方式手动调整px值.但为了确保它始终与其他字体完美对齐，我想插入一个数字和&emsp;的不可见空格.有了这一点，它应该在一行上完美地对齐.

Here is an image to show how it should look like:

如何做到这一点呢？如果你能帮忙，我会非常感激的.

* { margin: 0; padding: 0; font-family: Arial; } ol { counter-reset: item; } li { display: block; } li:before { content: counters(item, ".") " "; counter-increment: item; } /* select li that has "ol" */ li:has(ol):before { float: left; margin-bottom: 5px; /* small value */ } ol ol { overflow: hidden; /* create a formatting context for the float */ }

<ol> <li>Coffee <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </li> <li>Tea <ol> <li>One</li> <li>Two</li> <li>Three</li> </ol> </li> <li>Milk</li> <li>Cool</li> </ol>

Css 我怎样才能准确地获得虚构文本内容宽度的边距

推荐答案

Css相关问答推荐

单独.css文件中的样式不适用于Angular 元件

Css扩展搜索栏，如何添加图标结束？

实现前景渐变到背景的平滑混合

我的css是我的react 应用程序没有按预期工作

CSS Select 标签旁边的文本并输入

如何向 Highcharts 迷你图添加具有淡入淡出效果的线性渐变？

Vue3 组合 api 中的对象值样式

Angular Material - 将 matsnackbar 置于所有对话框之上

Img 未拉伸以满足所需的纵横比

我想在视频上使用混合混合模式的 svg

将框架放入 bootstrap 模式的正确方法是什么？

在 CSS 中如何使用 100% 和最大内容之间的最大值

有没有办法让它比它更敏感？

紫色表示访问过的超链接

如何在 CSS Grid 布局中指定行高？

CSS nth-child 表示大于和小于

在 RC.1 中，某些样式无法使用绑定语法添加

在 IE9-10 中压缩 SVG 的背景大小

删除行内块元素中大文本上方和下方的空白

使用 CSS 使 span 不可点击