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

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

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

Answer 1

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

使用背景和填充风格的组合可以创build类似的东西，例如

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

您可能希望将样式添加到父列表容器（ul）来定位项目符号列表项， 这个A List Apart文章有一个很好的开始参考。

Answer 2

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

 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

这个问题还没有提到的一个可能的解决scheme是：

  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：之前的宽度和高度需要与您select的背景图像的尺寸相同。 这适用于Internet Explorer 8及更高版本。

Answer 4

我有同样的问题，但我不能使用背景选项（并不想使用多个背景），所以我想到另一种解决scheme

这是一个菜单的例子，它有一个类似于活动/当前菜单项目的指示器（在另一个规则中默认的列表样式被设置为无）

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

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

Answer 5

这是我做了什么让灰色小块在左侧和文本的中心增加lineheight：

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

希望这有助于某人：D

Answer 6

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

在li上使用背景图像的build议在很多情况下都适用，但当列表与浮动图像一起使用时（例如，让文本环绕图像），则会失败。

希望这可以帮助。

Answer 7

或者你可以使用

 list-style-position: inside; 

Answer 8

你可以做的另一个select是：

 li:before{ content:''; padding: 0 0 0 25px; background:url(../includeshttp://img.dovov.comlayouts/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; } 

添加填充 – 左：如果你想在子弹和内容之间留有更多的空间。

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

Answer 9

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

还有你可以研究的列表风格的位置。 它会影响线条如何缠绕子弹图像。

Answer 10

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

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

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

编辑嵌套：添加此样式以将边距增加到子嵌套列表

ul ul {margin-left：15px; }

Answer 11

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

我从来没有添加填充项目亲自列出，通常控制他们的线高度和偶尔的余量就足够了。

当我有自定义列表样式图像的alignment问题时，我只需在任何一边添加一个像素或两个额外的空间来调整其相对于每个列表行的位置。

Answer 12

解决scheme与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;}