调整清单样式图片的位置？

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

当我对列表项使用填充时，图像将停留在其位置，并且不会随着填充而移动...

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

结合使用背景和填充样式可以创建看起来相似的内容，例如

li {
  background: url(images/bullet.gif) no-repeat left top; /* <-- change `left` & `top` too for extra control */
  padding: 3px 0px 3px 10px;
  /* reset styles (optional): */
  list-style: none;
  margin: 0;
}

您可能希望将样式添加到父级列表容器（ul）中，以放置项目符号列表项，此A List Apart文章提供了很好的入门参考。

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

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 {
        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：的顶部/左侧放置新子弹。请注意，li：的宽度和高度必须与您选择的背景图像的尺寸相同。在Internet Explorer 8及更高版本中均可使用。

我遇到了同样的问题，但是我无法使用background选项（并且不想使用多个背景），所以我想到了另一个解决方案

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

nav ul li.active>a:before{
    content: "■";
    position: absolute;
    top: -22px;
    left: 55px;
    font-size: 33px;

}

它通过使用带有“：before”伪类的正方形字符来创建正方形，并且可以使用绝对定位自由定位。

这是我为增加行高而在文本的左侧和中间放置小的灰色块的方法：

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

希望这可以帮助某人：D

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

如某些建议那样，使用li上的背景图像在很多情况下都可以使用，但是当列表与浮动图像一起使用时（例如，使文本环绕图像）会失败。

希望这可以帮助。

您可以执行的另一种选择是：

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

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

适用于IE8 +，Chrome，Firefox和Opera。

我使用此选项是因为您可以轻松换出列表样式，而且很有可能甚至根本不需要使用图像。（下面的小提琴）

http://jsfiddle.net/flashminddesign/cYAzV/1/

更新：

这将说明文本/内容进入第二行：

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:。

http://jsfiddle.net/McLeodWebDev/wfzwm0zy/

或者你可以使用

list-style-position: inside;

我认为您真正想做的是将填充（您当前正在添加到<li>中）添加到<ul>标记中，然后项目符号点将随<li>的文本一起移动。

您还可以查看列表样式位置。它会影响线条围绕子弹图像的缠绕方式。

像“一个胆小鬼”的答案，但稍作修改

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

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

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

ul ul {margin-left：15px; }

我正在使用这样的东西，对我来说似乎很干净而且很简单：

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，例如：

vertical-align:  top;

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

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

你可以设置list-style: none上li，而不是ul如果你喜欢。

我发现接受的答案有些模糊，也必须使用额外的填充和css命令。

我从不亲自将填充添加到列表项中，通常控制它们的行高，偶尔的边距就足够了。

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

Fontawesome解决方案

#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;}

隐藏默认的项目符号图像并使用，background-image因为您拥有更多控制权，例如：

li {
    background-image: url(https://material.io/tools/icons/static/icons/baseline-add-24px.svg);
    background-repeat: no-repeat;
    background-position: left 50%;
    padding-left: 2em;
}

ul {
    list-style: none;
}

<ul>
<li>foo</li>
<li>bar</li>
</ul>