gpt4 book ai didi

html - CSS 使用 List-Style-Image 调整文本在 HTML 列表中的位置

转载 作者:太空宇宙 更新时间:2023-11-04 04:30:28 24 4
gpt4 key购买 nike

我如何将列表中的每个“Blahs”向上移动一点,以便它们更多地位于下面我的 HTML 代码图片中每个列表元素符号的中间。

enter image description here

代码本身很简单:

<html>
<style>
li
{
margin-top: 0px;
}
</style>
</head>
<body>
<ul style="list-style-image:url('http://i.imgur.com/WvHNgNo.png?2'); margin-top:0px;">
<li>Blah</li>
<li>Blah</li>
<li>Blah</li>
</ul>
</body>
</html>

还尝试更改填充,但同时移动了图像和文本,我只想将文本向上移动。

最佳答案

您可以将每个元素符号设置为列表元素的背景,例如 background: url(http://i.imgur.com/WvHNgNo.png?2) no-repeat left 50%;

在您的情况下,以这种方式设置列表项的样式就足够了

li {
list-style-type: none;
margin-top: 0px;
background: url(http://i.imgur.com/WvHNgNo.png?2) no-repeat left 50%;
padding: 5px 0 5px 25px;
}

这是 fiddle http://jsfiddle.net/rWXZT/

关于html - CSS 使用 List-Style-Image 调整文本在 HTML 列表中的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17376114/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com