Css 调整列表样式图像位置？

有没有办法调整列表样式图像的位置

---

当我对列表项使用填充时，图像将保持在其位置，不会随填充移动…

我通常隐藏列表样式类型，并使用可移动的背景图像

li 
{
    background: url(/Images/arrow_icon.gif) no-repeat 7px 7px transparent;
    list-style-type: none;
    margin: 0;
    padding: 0px 0px 1px 24px;
    vertical-align: middle;
}

---

“7px 7px”是对齐元素内部背景图像的部分，也是相对于填充的部分

不太可能。您的填充（可能）正在应用于列表项，因此只会影响列表项中的实际内容

使用背景和填充样式的组合可以创建类似的样式，例如

li{
背景：url（images/bullet.gif）不重复左上；/*我认为您真正想要做的是将填充（您当前正在添加到
）添加到
标记，然后项目符号将随着
的文本移动

还有一个列表样式的位置，你可以查看。它会影响线条环绕项目符号图像的方式。
就像“darren”回答一样，只是做了一些小的修改

li 
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}

它可以跨浏览器工作，只需调整填充和边距

编辑嵌套：
添加此样式可将左边距添加到子嵌套列表中

ul{左边距：15px；}

下面是我所做的工作，使小灰色块位于文本的左侧和中心，并增加了行高：

line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;

希望这对某人有帮助：D
我也有同样的问题，但是我不能使用背景选项（并且不想使用多个背景），所以我想到了另一个解决方案

这是一个菜单示例，该菜单的活动/当前菜单项具有方形指示器（默认列表样式在另一个规则中设置为“无”）

它通过使用带有“：before”伪类的正方形字符来创建一个正方形
通过使用绝对定位，它可以自由定位。
您可以执行的另一个选项是：

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

使用（0 3px）定位列表图像

适用于IE8+、Chrome、Firefox和Opera

我使用这个选项是因为你可以很容易地交换列表样式，而且很有可能你甚至不需要使用图像


更新：

这将解释进入第二行的文本/内容：

ul{ 
    list-style-type:none;
}

li{
    position:relative;
}

ul li:before{
    content:'>';
    padding:0 10px 0 0;
    position:absolute;
    top:0; left:-10px;
}

如果您想在项目符号和内容之间留出更多空间，请在li中添加padding left:

我最终决定的解决方案是修改图像本身以增加一些间距

一些人建议在li上使用背景图像在很多情况下都有效，但当列表与浮动图像一起使用时（例如，使文本环绕图像）会失败

希望这能有所帮助。
这个问题的一个可能的解决方案是以下几点：

li:before{
    content:'';
    padding: 0 0 0 25px;
    background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

    li {
        position: relative;
        list-style-type: none;
    }

    li:before {
        content: "";
        position: absolute;
        top: 8px;
        left: -16px;
        width: 8px;
        height: 8px;
        background-image: url('your-bullet.png');
    }

现在，您可以使用li:before的左上角来定位新项目符号。请注意，li:before的宽度和高度必须与您选择的背景图像的尺寸相同。这在Internet Explorer 8及以上版本中适用。
我发现公认的答案有点模棱两可，必须使用额外的填充和css命令

我个人从不在列表中添加填充物，通常情况下，控制它们的行高和偶尔的边距就足够了

当自定义列表样式图像出现对齐问题时，我只需在需要调整其相对于每个列表行的位置的任何一侧周围添加一两个像素的额外空间。
或者您可以使用

list-style-position: inside;

使用Fontsome解决方案

#polyNedir ul li { position:relative;padding-left:20px }
#polyNedir ul li:after{font-family:fontawesome;content:'\f111';position:absolute;left:0px;top:3px;color:#fff;font-size:10px;}

隐藏默认项目符号图像并使用
背景图像
，因为您有更多的控件，如：


li{
背景图片：url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
背景重复：无重复；
背景位置：左50%；
左：2米；
}
保险商实验室{
列表样式：无；
}

福
酒吧
我使用的是这样的东西，对我来说似乎非常干净和简单：

ul { 
     list-style:  none;
     /* remove left padding, it's usually unwanted: */
     padding:  0;
}

li:before {
     content:  url(icon.png);
     display:  inline-block;
     vertical-align:  middle;

     /* If you want some space between icon and text: */
     margin-right:   1em;
}

上面的代码在我的大多数情况下都能正常工作。

要进行精确调整，您可以修改垂直对齐，例如：

vertical-align:  top;

/* or */
vertical-align:  -10px;

/* or whatever you need instead of "middle" */

如果愿意，您可以在
li
上设置
list样式：none
，而不是
ul
。

我的解决方案：
保险商实验室{
线高：1.3！重要；
李{
字号：x大号；
位置：相对位置；
&：之前{
内容：''；
显示：块；
位置：绝对位置；
顶部：5px；
左：-25px；
高度：23px；
宽度：23px；
背景图片：url（../img/list char.png）！重要；
背景尺寸：23px；
背景重复：无重复；
}
}
}
ul{
/*删除默认列表图标*/
列表样式：无；
填充：0；
/*小宽度和边距，用于演示文本换行*/
宽度：200px；
边框：1px纯红；
}
李{
/*确保文本已正确书写（不会溢出图像区域）*/
显示器：flex；
}
李：以前{
内容：网址(https://via.placeholder.com/10/0000FF/808080/?text=*);
显示：内联块；
垂直对齐：中间对齐；
/*如果要在图标和文本之间留出一些空间：*/
右边距：2米；
}
另一种解决方法是将
li
项设置为
flex
或
inline flex
。根据可能更适合您的情况而定。如果您在HTML中放置了真实的图标/图像，默认的flex位置位于中心水平线上。
您从未处理过跨浏览器渲染，不是吗？在我看来，这是最好的解决方案。如果将：：before伪元素浮动到左侧，则可以达到相同的效果。更新的版本将处理额外的行，这将使列表样式比正常的列表项更向右，如果有正常的列表项，则有点“关闭”