Question

我正在尝试使用html和css创建一个二分键。我希望＆＃39; 1。＆＃39;和＆＃39; a。＆＃39;在同一条线上。与＆＃39; b。＆＃39;直接在＆＃39; a。＆＃39;之后。目前他们都在不同的路线上。

我看起来像this 可以看到我想要的一个例子here

感谢this question for styling a ToC，我已经到目前为止了。欢迎简化版本。请查看我到目前为止所获得的代码片段。

提前致谢。

＆＃13;

.ol {
  list-style-position: outside;
}

.list li {
  position: relative;
  overflow: hidden;
  list-style-type: lower-alpha;
  padding-left: 15px;
  text-indent: -15px;
}

.list li:after {
  content: ".................................................................................................................................";
  text-indent: 20px;
  display: block;
  letter-spacing: 10px;
  position: absolute;
  left: 0px;
  bottom: 0px;
  z-index: -1;
}

.list li span {
  display: inline;
  background-color: #fff;
  padding-right: 1px;
}

.list li .number {
  float: right;
  font-weight: bold;
  background-color: #fff;
  padding-left: 10px;
}

＆＃13;

<div class="container">
  <div class="row">
    <div>
      <ol>
        <li>
          <ol class="list">
            <li style="margin-bottom:1em;"><span style="padding-left:.1em;">2 small keels and a large median keel between them on each side of caudal peduncle; 6–10 dorsal and 6–10 anal finlets; no adipose eyelids</span><span class="number">2</span></li>
            <li class="list;" style="margin-bottom:2em;"><span style="padding-left:.1em;">2 small keels, but no large median keel on each side of caudal peduncle; 5 dorsal and 5 anal finlets; front and rear of eye covered with adipose eyelids</span><span class="number">10</span></li>
          </ol>
        </li>
        <li>
          <ol class="list">
            <li style="margin-bottom:1em;"><span style="padding-left:.1em;">2 lateral lines </span><span class="number"><em>Grammatorcynus bilineatus</em> (Double-lined 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>
        <li>
          <ol class="list">
            <li style="margin-bottom:1em;"><span style="padding-left:.1em;">Teeth in jaws strong, compressed and knife-like; corselet of scales barely visible</span><span class="number">4</span></li>
            <li style="margin-bottom:2em;"><span style="padding-left:.1em;">Teeth in jaws slender, conical, barely compressed; corselet of scales well developed</span><span class="number">5</span></li>
          </ol>
        </li>
      </ol>
    </div>
  </div
</div>

＆＃13;

有序列表在同一行

0 个答案: