Question

有没有办法调整list-style-image的位置？

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

Answer 1

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

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

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）以定位项目符号列表项，this A List Apart article具有良好的起始参考。

Answer 2

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

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”是对齐元素内部的背景图像，也是相对于填充的。

Answer 3

此问题的可能解决方案尚未提及如下：

    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及更高版本。

Answer 4

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

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

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

}

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

Answer 5

以下是我在左侧和文本中心使用增加的直线高度获得的小灰色块所做的工作：

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

希望这有助于某人：D

Answer 6

您可以做的另一个选择如下：

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/

Answer 7

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

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

希望这有帮助。

Answer 8

或者您可以使用

list-style-position: inside;

Answer 9

喜欢“darren”的答案，但稍作修改

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

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

编辑嵌套： 添加此样式以将margin-left添加到子嵌套列表

ul ul {margin-left：15px; }

Answer 10

我认为您真正想要做的是将填充（您当前正在添加到＆lt; li＆gt;中）添加到＆lt; ul＆gt;标记，然后子弹点将与＆lt; li＆gt;。

的文本一起移动

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

Answer 11

ul { 
     /* Remove default list icon */
     list-style:  none;
     padding:  0;

     /* Small width and margin to demonstrate the text wrapping */
     width: 200px;
     border:1px solid red;
}

li{
   /* Make sure the text is properly wrpped (not spilling in the image area) */ 
    display: flex;
}

li:before {
     content:  url(https://via.placeholder.com/10/0000FF/808080/?text=*);
     display:  inline-block;
     vertical-align:  middle;

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

Answer 12

我发现接受的答案有点软糖，还必须与额外的填充和css命令争吵。

我从不亲自为列表项添加填充，通常控制它们的行高，偶尔的余量就足够了。

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

Answer 13

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

Answer 14

隐藏默认的项目符号图像并使用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>

Answer 15

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

ul { 
     list-style: none;
     padding: 0;   /*removes left padding if unwanted*/
}

li:before {
     content:        url(/icons/text.gif);
     display:        inline-block;
     vertical-align: middle;
}

上面的代码在我的大多数情况下都是有效的。
要进行精确调整，您可以使用长度值

vertical-align: -10px;
or
vertical-align: top;

或除middle以外的任何内容。

如果愿意，可以在list-style:none上设置li而不是ul。

如果要在图像和文本之间留出一些空间，可以设置一些边距：

li:before { margin-right: 1em }

Answer 16

My solution:

ul {
    line-height: 1.3 !important;
    li {
        font-size: x-large;
        position: relative;
        &:before {
            content: '';
            display: block;
            position: absolute;
            top: 5px;
            left: -25px;
            height: 23px;
            width: 23px;
            background-image: url(../img/list-char.png) !important;
            background-size: 23px;
            background-repeat: no-repeat;
        }
    }
}

Answer 17

另一种解决方法是将li项设置为flex或inline-flex。根据可能更适合您的情况。如果您在HTML中放置了真实的图标/图像，则默认的弯曲位置在中央水平线上。

调整列表样式图像位置？

17 个答案: