180

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

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

4

17 回答 17

217

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

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

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 文章有一个很好的入门参考。

于 2009-11-10T16:31:21.173 回答
77

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

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

于 2009-11-10T16:30:36.120 回答
22

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

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

于 2014-02-19T14:13:26.940 回答
12

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

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

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

}

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

于 2013-02-23T11:27:29.447 回答
8

这是我所做的，以使小灰色块位于文本的左侧和中心，并增加行高：

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

希望这可以帮助某人：D

于 2012-07-03T19:43:23.093 回答
6

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

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

希望这可以帮助。

于 2013-06-12T12:02:00.490 回答
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;
}

如果您希望项目符号和内容之间有更多空间，请将 padding-left: 添加到 li。

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

于 2013-04-01T19:32:47.003 回答
6

或者你可以使用

list-style-position: inside;
于 2015-06-10T13:29:38.307 回答
6

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

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: noneonli而不是。ul

于 2019-07-20T20:03:05.563 回答
3

I think what you really want to do is add the padding (you are currently adding to the <li>) to the <ul> tag and then the bullet points will move with the text of the <li>.

There is also the list-style-position you could look into. It affects how the lines wrap around the bullet images.

于 2009-11-10T16:44:51.170 回答
3

像“一个 darren”的答案，但稍作修改

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

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

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

ul ul{ margin-left:15px; }

于 2012-05-17T14:18:56.000 回答
2 
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;
}
于 2020-09-09T15:03:14.300 回答
0

I find the accepted answer a bit of a fudge, far too must jostling with extra padding and css commands.

I never add padding to list items personally, normally controlling their line height and the occasional margin is enough.

When I have an alignment issue with custom list style images I just add a pixel or two of extra space around whatever side is required to adjust its position relative to each list line.

于 2014-03-06T18:56:53.250 回答
0 

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

于 2020-03-14T13:59:24.190 回答
0

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;}
于 2017-06-13T12:57:57.447 回答
0

另一种解决方法是将li项目设置为flexor inline-flex。视情况而定，可能更适合您。如果您在 HTML 中放置了一个真实的图标/图像，则默认的 flex 位置位于中心水平线上。

于 2020-12-12T14:41:24.167 回答
0

隐藏默认的子弹图像并使用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>

于 2018-10-11T21:05:38.557 回答