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

Question

我有一个使用点头和嵌套有序列表的响应式分类键。当“＆＃39; a＆＃39;和＆＃39; b＆＃39;是嵌套的，但当我添加＆＃39; c＆＃39; d＆＃39;内容变得重叠。重叠似乎只发生在＆＃39; a＆＃39;而且＆＃39; b＆＃39;，c似乎没有这样做，我无法弄清楚为什么。 我可以看到我想要实现的目标

提前致谢！

＆＃13;

＆＃13;

A <- "Jack,Harris,Nelly"
B <- "Robert,Josh,Mary"

C <- A
A <- B
B <- C
rm(C)

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

这是因为var params = { LoadBalancerArn: 'arn:...' }; elbv2.describeListeners(params, function(err, data) { if (err) console.log(err, err.stack); // an error occurred else console.log(data); // successful response });

的值为margin-top

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

.list .list-item

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