gpt4 book ai didi

html - 如何将列表项文本和列表项图像放在同一行?

转载 作者:可可西里 更新时间:2023-11-01 12:55:56 24 4
gpt4 key购买 nike

HTML:-

ul {
list-style-image: url(/image/yGSp1.png);
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>

我正在尝试将图像作为元素符号放入列表项中,但问题是图像和列表项文本不在同一行。

screenshot of output here

image link (图像为 16px X 16px)

最佳答案

您可以将其用作伪元素,并且可以更好地控制位置和大小:

ul {
list-style:none;
}

li {
position:relative;
}
li:before {
content:"";
position:absolute;
top:2px;
left:-20px;
width:16px;
height:16px;
background:url(/image/yGSp1.png);
}
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, consequatur?</li>
</ul>

关于html - 如何将列表项文本和列表项图像放在同一行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52136477/

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