html - 点领导跨越两条线

Question

我正在尝试使用点引导符创建一个响应式分类键，我已经非常完美了，除了在调整浏览器大小时，引导符右侧的一些文本比剩余空间大，所以它跳到下一行在之前的位置留下一个空白区域。我想要扩展点来填充这个空白区域。

例如'spines' 和 'Scomberomorus' 之间的点见:

这是我的:

这就是我想要的:

对于我是初学者的错误表示歉意。

.ol {
  list-style-position: outside;
}

.list li {
  position: relative;
  overflow: hidden;
  list-style-position: inside;
  list-style-type: lower-alpha;
  padding-left: 15px;
  text-indent: -15px;
}

.list li:after {
  content: "..........................................................................";
  text-indent: 20px;
  display: inline-block;
  letter-spacing: 6px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: -10;
}

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


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

<div>
  <ol>
    <li>
      <ol class="list">
        <li style="margin-bottom: 1em; margin-top: -1em;"><span style="padding-left: em;">Snout as long as rest of head (Fig 6a); gill rakers absent; first dorsal fin with 13 – 27 spines</span> <span class="number"><em>Acanthocybium solandri</em> (wahoo)</span></li>
        <li class="list;" style="margin-bottom: 2em;"><span style="padding-left: .1em;">Snout much shorter than rest of head (Fig. 6b); at least 3 gill rakers present; first dorsal fin with 8 – 22 spines</span> <span class="number"><em>Scomberomorus</em> (Spanish mackerel)</span></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li style="margin-bottom: 1em; margin-top: -1em;"><span style="padding-left: .1em;">2 lateral lines (Fig. 4)</span> <span class="number"><em>Grammatorcynus bilineatus</em> (doublelined mackerel)</span></li>
        <li style="margin-bottom: 2em;"><span style="padding-left: .1em;">A single (upper) lateral line</span> <span class="number">3</span></li>
      </ol>
    </li>
  </ol>
</div>

Answer 1

这行得通。我还清理了您的 HTML/CSS，希望您不要介意。

div {
  overflow: hidden;
}

ol {
  list-style-position: outside;
}

.list li {
  position: relative;
  list-style-position: outside;
  list-style-type: lower-alpha;
}

.list .list-item {
  margin: 1em 0;
}

.list .list-item:last-child {
  margin: 0 0 2em;
}

.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;
}

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

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

<div>
  <ol>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">Snout as long as rest of head (Fig 6a); gill rakers absent; first dorsal fin with 13 – 27 spines</span> <span class="number"><em>Acanthocybium solandri</em> (wahoo)</span></li>
        <li class="list-item"><span class="text">Snout much shorter than rest of head (Fig. 6b); at least 3 gill rakers present; first dorsal fin with 8 – 22 spines</span> <span class="number"><em>Scomberomorus</em> (Spanish mackerel)</span></li>
      </ol>
    </li>
    <li>
      <ol class="list">
        <li class="list-item"><span class="text">2 lateral lines (Fig. 4)</span> <span class="number"><em>Grammatorcynus bilineatus</em> (doublelined mackerel)</span></li>
        <li class="list-item"><span class="text">A single (upper) lateral line</span> <span class="number">3</span></li>
      </ol>
    </li>
  </ol>
</div>