时间戳

首页 > 解决方案 > 改变属于不同_classes_的LI项目之间的距离

html - 改变属于不同_classes_的LI项目之间的距离

问题描述

如何在不改变 Text_2 和 Text_3 之间的距离的情况下增加 Text_2 和Text_4之间的距离？Text_2和Text_4属于一个类，而Text_3 -属于另一个类。更新：代码应将边距应用于与类相关的所有项目 - 不仅是“最后一个孩子”项目，还是“第二个”项目。我尝试了选择器：但由于某种原因它不起作用......



.example

.notol.circle ul > li:not(.example_translated)

小提琴

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

.meaning {
  width: auto;
  text-align: left;
  color: #1f2c60;
  font-size: calc(0.5em + 2.3vw);
}

.example {
  width: auto;
  text-align: left;
  color: #5d78e5;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #4b5ea7;
  font-style: italic;
  font-weight: 400;
}

ol.circle {
  position: relative;
  list-style-type: none;
  padding-left: 3em;
  margin-left: 1vw;
}

li {
  line-height: calc(1em + 1.5vw);
}

ol.circle>li {
  position: relative;
  counter-increment: item;
  margin-top: 1.5%;
}

ol.circle>li::before {
  position: absolute;
  transform: translateX(-1.73em);
  content: counter(item);
  display: inline-block;
  text-align: center;
  color: white;
  z-index: 2;
}

li::after {
  content: " ";
  position: absolute;
  width: calc(0.5em + 2.3vw);
  height: calc(0.5em + 2.3vw);
  border-radius: 50%;
  background: #1f2c60;
  left: -2.2em;
  top: 0.05em;
  z-index: 1;
}
<div class="meaning">
  <ol class="circle">
    <li>Text_1</li>
    <ul>
      <li><span class="example">Text_2</span></li>
      <li><span class="example_translated">Text_3</span></li>
      <li><span class="example">Text_4</span></li>
    </ul>
  </ol>
</div>

标签： htmlcss

解决方案

在这种情况下，您可以使用多种方式

方式一：

ol.circle ul > li:nth-child(2) {
    margin-bottom: 30px;
}

方式二

ol.circle ul > li:last-child {
    margin-top: 30px;
}

方式3

ol.circle li > span.example_translated {
  margin-bottom: 30px;
  display:block;
}

用于 jQuery 代码的一般解决方案

jQuery(document).ready(function($){
            jQuery('.example_translated').parent('li').css('margin-bottom', '30px');
});

推荐阅读