嘗試在邊距中顯示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’</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’</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 是如何垂直堆疊的：

uj5u.com熱心網友回復：

在您的最后一張圖片上，您提供的 HTML 內容的父級似乎將word-break屬性定義為break-word。

嘗試將此指令添加到您的 CSS 中：

.subsenseIteration {
    word-break: keep-all;
}

不確定這是您想要的，但它可能會幫助您解決部分問題。

標籤：html css

上一篇：僅使用html和css洗掉DIV

下一篇：使用CSS選擇器隱藏每個div（在ul/li內），除了第一個