单独针对的Li元素不占用其空间

Question

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

我的网页：

<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 {
}
}
}

结果：

在此处输入图像描述

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>