HTML中如何限制CSS设置的背景颜色占据的区域大小

默认情况下.sidepanel-list对应的元素是块级元素，块级元素默认宽度占满父容器的100%，因此你设置的背景色会铺满整行。你可以根据布局需求选择以下方案解决：

方案1：设置宽度贴合内容 #

如果需要保留元素的块级特性（独占一行），只让背景宽度和内容一致，修改CSS如下：

.sidepanel-list{
    margin-left: 10px;
    background-color: lightgray;
    width: fit-content;
    /* 可选：添加内边距让背景和文字的间距更美观 */
    padding: 3px 8px;
}

方案2：改为行内块元素 #

如果需要多个该类元素可以排在同一行，修改CSS如下：

.sidepanel-list{
    margin-left: 10px;
    background-color: lightgray;
    display: inline-block;
    padding: 3px 8px;
}

方案3：给内部行内元素加背景 #

如果你只需要文字部分带背景，可以把背景样式转移到元素内部包裹文字的<span>标签上，行内元素默认宽度和内容一致，无需额外调整宽度属性。

内容的提问来源于stack exchange，提问作者Eklavya Tomar