如何停止嵌套列表中的文本重叠

Question

我有一个使用点前导和嵌套有序列表的响应式分类键。当嵌套 'a' 和 'b' 时效果很好，但是当我添加 'c'、'd' 等时，内容会重叠。重叠似乎只发生在 'a' 和 'b' 之间，c 似乎没有这样做，我不明白为什么。可以看到我正在努力实现的图片

提前致谢！

#key {
  overflow: hidden;
  padding-top: 20px;
}

ol {
  list-style-position: outside;
}

ol.list {
  padding-left: 25px;
}

.list li {
  position: relative;
  list-style-position: outside;
  list-style-type: lower-alpha;
  padding-left: 5px;
  text-indent: -10px;
}

.list .list-item {
  margin: -37.3px 0px 15px;
}

.list .list-item:last-child {
  margin: 0 0 40px;
}

.list .list-item::before {
  content: ".......................................................................................";
  text-indent: 5px;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: -10;
}

.list .list-item .text::after {
  content: "....................................................................................";
  text-indent: 5px;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  z-index: -10;
}

.list .list-item span {
  display: inline;
  background-color: #fff;
  padding-right: 1px;
  padding-left: 10px;
}

.list .list-item .number {
  float: right;
  font-weight: bold;
  color: #198e9d;
  background-color: #fff;
  padding-left: 11px;
}


/* Clearfix */

.list .list-item::after {
  content: "";
  display: block;
  clear: both;
}

<div id="key" style="text-align: justify;">
  <ol>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">This is A in the first couplet and this is fine</span><span class="number">2</span></li>
        <li class="list-item"><span class="text">This is B in the first couplet and this is fine</span><span class="number">4</span></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">This is A in the second couplet and this is not fine</span> <span class="number">3</span></li>
        <li class="list-item"><span class="text">This is B in the second couplet and this is overlapping A - not fine</span> <a href="https://www.website.org/fish/thunnus-obesus/"><span class="number"><em>Thunnus obesus</em> (bigeye tuna)</span></a></li>
        <li class="list-item"><span class="text">This is C in the second couplet and although not overlapping B it doesnt have padding below</span> <a href="https://www.fishider.org/scombridae/thunnus-albacares/"><span class="number"><em>Thunnus albacares</em> (yellowfin tuna)</span></a></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">This is A in the third couplet and this is not fine</span> <a href="https://www.website.org/fish/thunnus-tonggol/"><span class="number"><em>Thunnus tonggol</em> (longtail tuna)</span></a></li>
        <li class="list-item"><span class="text">This is B in the third couplet and this is overlapping A - not fine</span><a href="https://www.website.org/fish/thunnus-maccoyii/"><span class="number"><em>Thunnus orientalis</em> (Pacific bluefin tuna)</span></a></li>
        <li class="list-item"><span class="text">This is C in the third couplet and this is overlapping b - not fine </span><a href="https://www.website.org/fish/thunnus-maccoyii/"><span class="number"><em>Thunnus maccoyii</em> (southern bluefin tuna)</span></a></li>
        <li class="list-item"><span class="text">This is D in the third 'couplet' and although its not overlapping C it doesn't have padding below </span><a href="https://www.website.org/fish/thunnus-alalunga/"><span class="number"><em>Thunnus alalunga</em> (albacore tuna)</span></a></li>
      </ol>
    </li>
  </ol>
</div>

Answer 1

这是因为 .list .list-item

的负 margin-top 值

如果将其设置为 0，则不会重叠。

#key {
  overflow: hidden;
  padding-top: 20px;
}

ol {
  list-style-position: outside;
}

ol.list {
  padding-left: 25px;
}

.list li {
  position: relative;
  list-style-position: outside;
  list-style-type: lower-alpha;
  padding-left: 5px;
  text-indent: -10px;
}

.list .list-item {
  margin: 0 0px 15px;
}

.list .list-item:last-child {
  margin: 0 0 40px;
}

.list .list-item::before {
  content: ".......................................................................................";
  text-indent: 5px;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: -10;
}

.list .list-item .text::after {
  content: "....................................................................................";
  text-indent: 5px;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  z-index: -10;
}

.list .list-item span {
  display: inline;
  background-color: #fff;
  padding-right: 1px;
  padding-left: 10px;
}

.list .list-item .number {
  float: right;
  font-weight: bold;
  color: #198e9d;
  background-color: #fff;
  padding-left: 11px;
}


/* Clearfix */

.list .list-item::after {
  content: "";
  display: block;
  clear: both;
}

<div id="key" style="text-align: justify;">
  <ol>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">This is A in the first couplet and this is fine</span><span class="number">2</span></li>
        <li class="list-item"><span class="text">This is B in the first couplet and this is fine</span><span class="number">4</span></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">This is A in the second couplet and this is not fine</span> <span class="number">3</span></li>
        <li class="list-item"><span class="text">This is B in the second couplet and this is overlapping A - not fine</span> <a href="https://www.website.org/fish/thunnus-obesus/"><span class="number"><em>Thunnus obesus</em> (bigeye tuna)</span></a></li>
        <li class="list-item"><span class="text">This is C in the second couplet and although not overlapping B it doesnt have padding below</span> <a href="https://www.fishider.org/scombridae/thunnus-albacares/"><span class="number"><em>Thunnus albacares</em> (yellowfin tuna)</span></a></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">This is A in the third couplet and this is not fine</span> <a href="https://www.website.org/fish/thunnus-tonggol/"><span class="number"><em>Thunnus tonggol</em> (longtail tuna)</span></a></li>
        <li class="list-item"><span class="text">This is B in the third couplet and this is overlapping A - not fine</span><a href="https://www.website.org/fish/thunnus-maccoyii/"><span class="number"><em>Thunnus orientalis</em> (Pacific bluefin tuna)</span></a></li>
        <li class="list-item"><span class="text">This is C in the third couplet and this is overlapping b - not fine </span><a href="https://www.website.org/fish/thunnus-maccoyii/"><span class="number"><em>Thunnus maccoyii</em> (southern bluefin tuna)</span></a></li>
        <li class="list-item"><span class="text">This is D in the third 'couplet' and although its not overlapping C it doesn't have padding below </span><a href="https://www.website.org/fish/thunnus-alalunga/"><span class="number"><em>Thunnus alalunga</em> (albacore tuna)</span></a></li>
      </ol>
    </li>
  </ol>
</div>

如何停止嵌套列表中的文本重叠

how to stop text overlapping in nested list

html

css

html-lists

nested-lists

overlap