CSS 调整列表样式图像位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1708833/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adjust list style image position?
提问by datisdesign
Is there a way to adjust the position of list-style-image?
有没有办法调整list-style-image的位置？
When I use padding for list items the image will stay at its position and won't move with padding...
当我对列表项使用填充时，图像将保持在其位置并且不会随填充移动...
回答by a darren
Not really. Your padding is (probably) being applied to the list item, so will only affect the actual content within the list item.
并不真地。您的填充（可能）应用于列表项，因此只会影响列表项中的实际内容。
Using a combination of backgroundand paddingstyles can create something that looks similar e.g.
使用背景和填充样式的组合可以创建看起来相似的东西，例如
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;
}
You might be looking to add styling to the parent list container (ul) to position your bulleted list items, this A List Apart articlehas a good starting reference.
您可能希望将样式添加到父列表容器 (ul) 以定位您的项目符号列表项，这篇 A List Apart 文章有一个很好的入门参考。
回答by NickGPS
I normally hide the list-style-type and use a background image, which is moveable
我通常隐藏列表样式类型并使用可移动的背景图像
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;
}
The "7px 7px" is what aligns the background image inside the element and is also relative to the padding.
“7px 7px”用于对齐元素内的背景图像，并且还与填充相关。
回答by Ramon de Jesus
A possible solution to this question that wasn't mentioned yet is the following:
尚未提及的此问题的可能解决方案如下：
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');
}
You can now use the top/left of the li:before to position the new bullet. Note that the width and height of the li:before need to be the same dimensions as the background image you choose. This works in Internet Explorer 8 and up.
您现在可以使用 li:before 的顶部/左侧来定位新项目符号。请注意，li:before 的宽度和高度需要与您选择的背景图像尺寸相同。这适用于 Internet Explorer 8 及更高版本。
回答by lad1337
I had the same problem, but i could not use the background option (and didn't want to use multiple backgrounds) so i thought of another solution
我有同样的问题，但我无法使用背景选项（并且不想使用多个背景）所以我想到了另一个解决方案
this is an example for a menu that has a square like indicator for the active/current menu item (the default list style is set to none in another rule)
这是一个菜单示例，该菜单具有用于活动/当前菜单项的方形指示器（默认列表样式在另一条规则中设置为无）
nav ul li.active>a:before{
content: "■";
position: absolute;
top: -22px;
left: 55px;
font-size: 33px;
}
it creates a square by using a square character with the ":before" pseudo class and it is freely positionable by using absolute positioning.
它通过使用带有“:before”伪类的正方形字符创建一个正方形，并且可以通过使用绝对定位自由定位。
回答by kaed
Here's what I did to get small grey blocks to be on the left side and in the center of the text with an increased lineheight:
这是我为使小灰色块位于文本的左侧和中心而增加的行高所做的工作：
line-height:200%;
padding-left:13px;
background-image:url('images/greyblock.gif');
background-repeat:no-repeat;
background-position:left center;
Hope this helps someone :D
希望这对某人有所帮助：D
回答by Mathias Maes
Or you can use
或者你可以使用
list-style-position: inside;
回答by McLeodWebDev
Another option you can do, is the following:
您可以做的另一个选择是：
li:before{
content:'';
padding: 0 0 0 25px;
background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}
Use (0 3px) to position the list image.
使用 (0 3px) 定位列表图像。
Works in IE8+, Chrome, Firefox, and Opera.
适用于 IE8+、Chrome、Firefox 和 Opera。
I use this option because you can swap out list-style easily and a good chance you may not even have to use an image at all. (fiddle below)
我使用此选项是因为您可以轻松地更换列表样式，而且您甚至可能根本不必使用图像。（下面的小提琴）
http://jsfiddle.net/flashminddesign/cYAzV/1/
http://jsfiddle.net/flashminddesign/cYAzV/1/
UPDATE:
更新：
This will account for text / content going into the second line:
这将考虑进入第二行的文本/内容：
ul{
list-style-type:none;
}
li{
position:relative;
}
ul li:before{
content:'>';
padding:0 10px 0 0;
position:absolute;
top:0; left:-10px;
}
Add padding-left: to the li if you want more space between the bullet and content.
如果您希望项目符号和内容之间有更多空间，请将 padding-left: 添加到 li。
回答by zeds
The solution I settled for in the end was to modify the image itself to add some spacing.
我最终确定的解决方案是修改图像本身以增加一些间距。
Using a background image on the li as some suggest works in a lot of cases but fails when the list is used alongside a floated image (for example to get the text to wrap around the image).
在 li 上使用一些建议的背景图像在很多情况下都有效，但是当列表与浮动图像一起使用时会失败（例如让文本环绕图像）。
Hope this helps.
希望这可以帮助。
回答by zeds
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>.
我认为您真正想要做的是将填充（您当前正在添加到 <li> 中）添加到 <ul> 标记，然后项目符号点将随 <li> 的文本移动。
There is also the list-style-position you could look into. It affects how the lines wrap around the bullet images.
您还可以查看列表样式位置。它会影响线条环绕子弹图像的方式。
回答by khaled_webdev
like "a darren" answer but minor modification
像“一个达伦”的答案，但稍作修改
li
{
background: url("images/bullet.gif") left center no-repeat;
padding-left: 14px;
margin-left: 24px;
}
it works cross browser, just adjust the padding and margin
它可以跨浏览器工作，只需调整填充和边距
Edit for nested:add this style to add margin-left to the sub-nested list
编辑嵌套：添加此样式以将 margin-left 添加到子嵌套列表
ul ul{ margin-left:15px; }
ul ul{ margin-left:15px; }
