HTML-li图标不会随缩放而调整大小

Question

只是一个小问题。 我已将list-style-image设置为url，其中包含我想要使用的图像，即32 * 32px png。

放大问题： 该列表将被压缩并移动到相邻的div中。

缩小问题： 列表变得更加间隔并垂直向下延伸，直到列表结束。

我试图通过将其填充和边距设置为0，以及将高度和宽度设置为自动以及特定值来修复其大小，但无济于事。

如果需要，我可以提供代码片段，但在发布简单修复事件时我不会这样做。

Answer 1

看看：https://jsfiddle.net/bernardbaker/pg3xu2ca/ 我使用了带背景的HTML列表元素（精灵表）。 您可以使用单列精灵表执行相同的操作。

li {
    list-style: none;
    position: relative;
    padding-left: 20px;
    height: 18px;
    width: 12px;
    background-image: url('https://scotthsmith.com/projects/social-icons/blue/IconGrid.svg');
    background-size: 100px 100px;
    background-position: 0px 0px;
}

它还解决了放大和缩小问题。