如何准确获得虚构文本内容宽度的边距？

Question

这是我正在处理的列表：

\n

\r\n

\r\n

* {\n  margin: 0;\n  padding: 0;\n  font-family: Arial;\n}\n\nol {\n  counter-reset: item;\n}\n\nli {\n  display: block;\n}\n\nli:before {\n  content: counters(item, ".") "\xe2\x80\x83";\n  counter-increment: item;\n}\n\nol li ol li {\n  margin-left: 80px; /* The left margin should have exactly the width of one number and a   */\n}

\r\n

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

\r\n

\r\n

\r\n

\n

目前ol li ol li有margin-left: 80px;. 现在可以手动调整该px值，例如1.1与 完全左对齐Coffee。但为了确保它始终与其他字体完美对齐，我想插入一个由一个数字和一个 组成的不可见空格 。这样，它就应该在一条线上完美对齐。

\n

这是一张显示其外观的图像：\n

\n

如何才能做到这一点？我将非常感谢您的帮助。

\n

Answer 1

浮力可以做到。你让第一个数字浮动，底部边距很小，它会将所有内容按其宽度向右推。

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n