单独定位的li元素没有占用其空间

Question

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

我的HTML：

if

我的CSS：

if

结果：

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>