如何精确获取虚构文本内容宽度中的边距？

huangapple
go评论90阅读模式
英文:

How can I get margin exactly in the width of imaginary text content?

问题

以下是代码部分的翻译：

  1. 这是我正在使用的列表：
  3. <!-- begin snippet: js hide: false console: true babel: false -->
  5. <!-- language: lang-css -->
  7.     * {
  8.       margin: 0;
  9.       padding: 0;
  10.       font-family: Arial;
  11.     }
  13.     ol {
  14.       counter-reset: item;
  15.     }
  17.     li {
  18.       display: block;
  19.     }
  21.     li:before {
  22.       content: counters(item, ".") " ";  /* 这里是CSS代码 */
  23.       counter-increment: item;
  24.     }
  26.     ol li ol li {
  27.       margin-left: 80px; /* 左边距应与一个数字和一个   的宽度完全相同 */
  28.     }
  30. <!-- language: lang-html -->
  32.     <ol>
  33.       <li>Coffee
  34.         <ol>
  35.           <li>One</li>
  36.           <li>Two</li>
  37.           <li>Three</li>
  38.         </ol>
  39.       </li>
  40.       <li>Tea
  41.         <ol>
  42.           <li>One</li>
  43.           <li>Two</li>
  44.           <li>Three</li>
  45.         </ol>
  46.       </li>
  47.       <li>Milk</li>
  48.       <li>Cool</li>
  49.     </ol>
  51. <!-- end snippet -->

希望这有所帮助。

英文:

This is a list I am working with:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   font-family: Arial;
  5. }
  7. ol {
  8.   counter-reset: item;
  9. }
  11. li {
  12.   display: block;
  13. }
  15. li:before {
  16.   content: counters(item, &quot;.&quot;) &quot; &quot;;
  17.   counter-increment: item;
  18. }
  20. ol li ol li {
  21.   margin-left: 80px; /* The left margin should have exactly the width of one number and a &amp;emsp; */
  22. }

<!-- language: lang-html -->

  1. &lt;ol&gt;
  2.   &lt;li&gt;Coffee
  3.     &lt;ol&gt;
  4.       &lt;li&gt;One&lt;/li&gt;
  5.       &lt;li&gt;Two&lt;/li&gt;
  6.       &lt;li&gt;Three&lt;/li&gt;
  7.     &lt;/ol&gt;
  8.   &lt;/li&gt;
  9.   &lt;li&gt;Tea
  10.     &lt;ol&gt;
  11.       &lt;li&gt;One&lt;/li&gt;
  12.       &lt;li&gt;Two&lt;/li&gt;
  13.       &lt;li&gt;Three&lt;/li&gt;
  14.     &lt;/ol&gt;
  15.   &lt;/li&gt;
  16.   &lt;li&gt;Milk&lt;/li&gt;
  17.   &lt;li&gt;Cool&lt;/li&gt;
  18. &lt;/ol&gt;

<!-- end snippet -->

The ol li ol li currently has margin-left: 80px;. Now it would be possible to manually adjust the px value in a way that for example 1.1 is perfectly left aligned with Coffee. But to make sure it will be always perfectly aligned, also with other fonts, I would like to insert an invisible space of one number and a &amp;emsp;. With that, it should be perfectly aligned on one line.

Here is an image to show how it should look like:
如何精确获取虚构文本内容宽度中的边距？

How can this be done? I would be very thankful for help.

答案1

得分: 2

Float可以做到这一点。您可以使用一个带有微小底边距的浮动元素来使第一个数字浮动，并且它将通过其宽度将一切推到右边。

英文:

Float can do it. You make the first number float with a tiny bottom margin and it will push everything to the right by its width.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4.   font-family: Arial;
  5. }
  7. ol {
  8.   counter-reset: item;
  9. }
  11. li {
  12.   display: block;
  13. }
  15. li:before {
  16.   content: counters(item, &quot;.&quot;) &quot; &quot;;
  17.   counter-increment: item;
  18. }
  20. /* select li that has &quot;ol&quot; */
  21. li:has(ol):before {
  22.   float: left;
  23.   margin-bottom: 5px; /* small value */
  24. }
  26. ol ol {
  27.   overflow: hidden; /* create a formatting context for the float */
  28. }

<!-- language: lang-html -->

  1. &lt;ol&gt;
  2.   &lt;li&gt;Coffee
  3.     &lt;ol&gt;
  4.       &lt;li&gt;One&lt;/li&gt;
  5.       &lt;li&gt;Two&lt;/li&gt;
  6.       &lt;li&gt;Three&lt;/li&gt;
  7.     &lt;/ol&gt;
  8.   &lt;/li&gt;
  9.   &lt;li&gt;Tea
  10.     &lt;ol&gt;
  11.       &lt;li&gt;One&lt;/li&gt;
  12.       &lt;li&gt;Two&lt;/li&gt;
  13.       &lt;li&gt;Three&lt;/li&gt;
  14.     &lt;/ol&gt;
  15.   &lt;/li&gt;
  16.   &lt;li&gt;Milk&lt;/li&gt;
  17.   &lt;li&gt;Cool&lt;/li&gt;
  18. &lt;/ol&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年3月9日 19:54:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/75684265.html
  • css
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定