html - 尝试在边距中显示 HTML 元素时如何避免出现问题？

问题描述

对于下面的 HTML，我想在其对应定义左侧的空白处显示迭代和 subsenseIteration 编号。如果我使用绝对定位，更改字体大小时结果似乎不一致。如果我使用相对定位，则在迭代次数的原始位置会保留一个间隙。

如果我尝试通过将迭代宽度更改为 0 来消除间隙，1.1则会垂直显示，字符堆叠在一起。

有没有其他方法可以将迭代次数移动到边距而不留下间隙，而不将宽度设置为 0？

.iteration {
  display: inline-block;
  position: relative;
  right: 1em;
  width: 0px;
}

.subsenseIteration {
  display: inline-block;
  position: relative;
  right: 2em;
  width: 0px;
}

<ul class="defs">
  <li style="list-style-type:none"><span class="iteration">1</span><span class="definition">Definition.</span>
    <ol class="subSenses">
      <li class="subSense" style="list-style-type:none"><span class="subsenseIteration">1.1</span><span class="subDefinition">Subdefinition.</span>
      </li>
    </ol>
  </li>
</ul>

这是原始 HTML 和我希望它的外观的图片：

<div class="entryWrapper">
  <div class="breadcrumbs layout">
    <p><a class="desktopCrumb home_breadcrumb_hide" href="/" data-behaviour="ga-event-breadcrumb" data-value="Homepage anchor">Home</a> <span class="home_breadcrumb_hide chevron"></span><a class="desktopCrumb middle_crumb" href="/en/definition" data-behaviour="ga-event-breadcrumb"
        data-value="Primary root">US English</a> <span class="chevron"></span> <a href="https://www.lexico.com/en/definition/assuage">assuage</a> </p>
  </div>
  <div class="entryHead primary_homograph" id="h69871041014560">
    <div id="audio-hover-preload"></div>
    <h2 class="hwg"><span class="hw" data-headword-id="assuage" id="m_en_gbus0053230">assuage<sup></sup></span></h2>
  </div>
  <section class="gramb">
    <h3 class="ps pos"><span class="pos">transitive verb</span></h3><span class="transitivity"><span class="neutral">[</span>with object<span class="neutral">]</span></span>
    <ul class="semb">
      <li>
        <div class="trg">
          <div class="sense-inflection"></div>
          <p><span class="iteration">1</span><span class="ind one-click-content" data-no-definition="[&quot;make&quot;,&quot;an&quot;,&quot;unpleasant&quot;,&quot;feeling&quot;,&quot;less&quot;,&quot;intense&quot;]" data-behaviour="ga-event-one-click" data-value="Lexical data - en-us">Make (an unpleasant feeling) less intense.</span></p>
          <span
            class="indicators"></span>
            <div class="exg">
              <div class="ex"><em><span class=" one-click-content" data-no-definition="[&quot;lsquothe&quot;,&quot;letter&quot;,&quot;assuaged&quot;,&quot;the&quot;,&quot;fears&quot;,&quot;of&quot;,&quot;most&quot;,&quot;membersrsquo&quot;]" data-behaviour="ga-event-one-click" data-value="Lexical data - en-us">‘the letter assuaged the fears of most members’&lt;/span></em></div>
            </div>
            <div class="synonyms">
              <div class="moreInfo"><button data-behaviour="ga-event-synonyms" data-value="expand/collapse">Synonyms</button></div>
              <div class="exg">
                <div><strong class="syn">relieve</strong><span class="syn">, ease, alleviate, soothe, mitigate, dampen</span></div>
              </div>
            </div>
            <ol class="subSenses">
              <li class="subSense"><span class="subsenseIteration">1.1</span><span class="ind one-click-content" data-no-definition="[&quot;satisfy&quot;,&quot;an&quot;,&quot;appetite&quot;,&quot;or&quot;,&quot;desire&quot;]" data-behaviour="ga-event-one-click" data-value="Lexical data - en-us">Satisfy (an appetite or desire)</span>
                <div
                  class="trg"></div>
        <div class="exg">
          <div class="ex"><em><span class=" one-click-content" data-no-definition="[&quot;lsquoan&quot;,&quot;opportunity&quot;,&quot;occurred&quot;,&quot;to&quot;,&quot;assuage&quot;,&quot;her&quot;,&quot;desire&quot;,&quot;for&quot;,&quot;knowledgersquo&quot;]" data-behaviour="ga-event-one-click" data-value="Lexical data - en-us">‘an opportunity occurred to assuage her desire for knowledge’&lt;/span></em></div>
        </div>
        <div class="synonyms">
          <div class="moreInfo"><button data-behaviour="ga-event-synonyms" data-value="expand/collapse">Synonyms</button></div>
          <div class="exg">
            <div><strong class="syn">satisfy</strong><span class="syn">, fulfil, gratify, appease, indulge, relieve</span></div>
          </div>
        </div>
        </li>
        </ol>
</div>
</li>
</ul>
<section class="morphUnitPronunciation">
  <h3><strong>Pronunciation</strong>
    <a title="Key to pronunciations" class="ipaLink" href="/grammar/key-to-pronunciation"></a>
  </h3>
  <div class="pron">
    <h2><strong>assuage</strong></h2><span class="phoneticspelling">/əˈswāj/</span> <span class="phoneticspelling">/əˈsweɪdʒ/</span> <a class="speaker" onclick="this.firstElementChild.play();"><audio src="https://lex-audio.useremarkable.com/mp3/assuage__us_1.mp3" preload="none"></audio></a></div>
</section>
</section>
<section class="etymology etym">
  <h3><strong>Origin</strong></h3>
  <div class="senseInnerWrapper">
    <p>Middle English from Old French assouagier, asouagier, based on Latin ad- ‘to’ (expressing change) + suavis ‘sweet’.</p>
  </div>
</section>
</div>

这是我目前遇到的问题。注意 1.1 是如何垂直堆叠的：

标签： htmlcss

html - 尝试在边距中显示 HTML 元素时如何避免出现问题？

问题描述

解决方案

推荐阅读