css - 单独定位的 li 元素不占用其空间

Question

我的问题:第二个列表元素的样式不同，但不会占用空间。有人可以指出可能是什么问题吗？

我的 HTML:

   <div class="c-scrollmenu">
          <ul>
            <div class="c-scrollmenu__item"><li>Laser cutting</li></div>
            <div class="c-scrollmenu__item--active"><li>Plasma cutting</li></div>
            <div class="c-scrollmenu__item"><li>Tube laser</li></div>
            <div class="c-scrollmenu__item"><li>Bending</li></div>
            <div class="c-scrollmenu__item"><li>Surface treatment</li></div>
          </ul>
        </div>

我的 CSS:

.c-scrollmenu {

  ul {
    list-style: none;
  }

  &__item li {
    color: $color-secondary;
    font-size: 21px;
    font-weight: $fw-regular;
    line-height: 1.33;
    letter-spacing: -0.31px;
    padding: 7px 10px 7px;
    margin-bottom: 10px;
    background-color: white;
    display: inline-block;


  }

  &__item--active li {
    color: white;
    font-size: $h2-font-size;
    font-weight: $fw-regular;
    line-height: 0.02;
    letter-spacing: 0.3px;
    // padding: 5px;

    &::before {

    }

  }

}

结果:

enter image description here

Answer 1

你在第二个元素上缺少类 c-scrollmenu__item

.c-scrollmenu ul {
  list-style: none;
}
.c-scrollmenu__item li {
  color: blue;
  font-size: 21px;
  font-weight: normal;
  line-height: 1.33;
  letter-spacing: -0.31px;
  padding: 7px 10px 7px;
  margin-bottom: 10px;
  background-color: white;
  display: inline-block;
}
.c-scrollmenu__item--active li {
  color: red;
  font-size: 24px;
  font-weight: normal;
  line-height: 0.02;
  letter-spacing: 0.3px;
}

  <div class="c-scrollmenu">
  <ul>
    <div class="c-scrollmenu__item"><li>Laser cutting</li></div>
    <div class="c-scrollmenu__item c-scrollmenu__item--active"><li>Plasma cutting</li></div>
    <div class="c-scrollmenu__item"><li>Tube laser</li></div>
    <div class="c-scrollmenu__item"><li>Bending</li></div>
    <div class="c-scrollmenu__item"><li>Surface treatment</li></div>
  </ul>
</div>