CSS:列表样式图像的定位
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6126685/
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
CSS: Positioning of list-style-image
提问by Frank Vilea
I have a list with list-style-image:url("../images/prices/tick.png");
我有一个清单 list-style-image:url("../images/prices/tick.png");
How can I position the image correctly so that the image and the text are on the same y
coordinate? Wasn't there a way to define it right after the url
with url("link") 20px 30px
?
如何正确定位图像,使图像和文本位于同一y
坐标上?没有办法在url
with之后立即定义它url("link") 20px 30px
吗?
I can't seem to find the info online on how it was done again.
我似乎无法在网上找到有关如何再次完成的信息。
回答by clairesuzy
I think you're thinking about using a background-image
rather than the list-style-image
..
我认为您正在考虑使用 abackground-image
而不是list-style-image
..
so set the list-style
to none and put a background-image
on the li
- then yes you'll be able to position it a bit more accurately using the background-position
part of this:
所以将 the 设置list-style
为 none 并background-image
在 the 上放一个li
- 然后是的,您将能够使用以下background-position
部分更准确地定位它:
background: url("link") no-repeat 20px 30px;
回答by silex
You can try something like this:
你可以尝试这样的事情:
ul {
list-style:none;
}
li {
background:url(image.gif) no-repeat 0 0;
padding-left:16px;
}
So background position and padding value could be configured.
因此可以配置背景位置和填充值。
回答by pixelbobby
回答by thedaian
According to Mozilla's Developer Docson list style, you cannot position the list marker using CSS. The closest is list-style-position, which only lets you position the marker as inside or outside the list elements.
根据Mozilla's Developer Docson list style,您不能使用 CSS 定位列表标记。最接近的是 list-style-position,它只允许您将标记定位在列表元素的内部或外部。
If you want to position the image, you're going to have to edit the image itself, or use the image as a background instead.
如果要定位图像,则必须编辑图像本身,或者使用图像作为背景。