调整列表样式图像位置？

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

当我使用填充列表项目的图像将停留在其位置，不会与填充移动..。

281992 次浏览
小开

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

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

小开
最佳答案

没有。您的填充(可能)正应用于列表项，因此只会影响列表项中的实际内容。

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

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)添加样式以定位项目符号列表项，这篇名单分开的文章有一个很好的起始引用。

小开

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

还可以查看列表样式位置，它会影响子弹头图像的线条环绕方式。

小开

比如“一个 Darren”的回答，只是稍微修改了一下

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

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

为嵌套编辑: 添加此样式可将左边距添加到子嵌套列表

Ul {左边距: 15px; }

小开

下面是我所做的，在文本的左边和中间增加了一个灰色的小块:

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

希望这对某人有所帮助

小开

我有同样的问题，但我不能使用背景选项(并不想使用多个背景) ，所以我想到了另一个解决方案

这是一个菜单示例，该菜单具有活动/当前菜单项的方形指示器(在另一个规则中，默认的列表样式设置为 none)

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


}

它通过使用带有“ : before”伪类的正方形字符创建一个正方形 采用绝对定位可自由定位。

小开

你可以做的另一个选择是:

li:before{
content:'';
padding: 0 0 0 25px;
background:url(../includes/images/layouts/featured-list-arrow.png) no-repeat 0 3px;
}

使用(03px)定位列表图像。

适用于 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;
}

如果您希望项目符号和内容之间有更多的空间，可以在 li 中添加 paddingleft: 。

Http://jsfiddle.net/mcleodwebdev/wfzwm0zy/

小开

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

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

希望这个能帮上忙。

小开

这个问题的一个可能的解决办法是这样的:

    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以上都有效。

小开

我发现这个被接受的答案有点不靠谱，而且还必须与额外的填充和 css 命令相冲突。

我从不亲自为列表项添加填充，通常控制它们的行高和偶尔的页边距就足够了。

当我有一个自定义列表样式的图像对齐问题，我只是添加一个像素或两个额外的空间周围的任何一方需要调整其相对于每个列表行的位置。

小开

或者你可以用

list-style-position: inside;
小开

解决方案

#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;}
小开

隐藏默认的项目符号图像，并使用 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>

小开

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

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" */

如果您愿意，可以在 li上设置 list-style: none而不是 ul。

小开 

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

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

另一种解决方法是将 li项设置为 flex或 inline-flex。取决于更适合你的环境。如果你有一个真正的图标/图像放在 HTML 中，默认的伸缩位置是在中央水平线上。


提交答案