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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 00:37:31  来源:igfitidea点击:

CSS: Positioning of list-style-image

cssimageposition

提问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 ycoordinate? Wasn't there a way to define it right after the urlwith url("link") 20px 30px?

如何正确定位图像,使图像和文本位于同一y坐标上?没有办法在urlwith之后立即定义它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-imagerather than the list-style-image..

我认为您正在考虑使用 abackground-image而不是list-style-image..

so set the list-styleto none and put a background-imageon the li- then yes you'll be able to position it a bit more accurately using the background-positionpart 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

Created a jsFiddlefor you to work with. I adjusted the background image positionso it would look more like a bullet.

创建了一个jsFiddle供您使用。我调整了背景图像的位置,使它看起来更像一颗子弹。

回答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.

如果要定位图像,则必须编辑图像本身,或者使用图像作为背景。