Question

CSS问题 关于list-style-image

list-style-image 的图标似乎超过了 ul 的范围，根据需求设置了li 的padding-left 以后，更是远离了li中的文字。。有什么办法，能使自定义的list-style-image贴近文字？ 我自己想到的是设置li的background-image来代替list-style-image，还没实践

Answer 1

就按你自己说的，使用background-image，利用background-position来移动图标，这样可以不用动a标签的样式属性，可达到最大程度上的兼容性及实用性：

<ul class="myUl">
<li id="li1">tag1</li>
<li id="li2">tag2</li>
<li id="li3">tag3</li>
<li id="li4">tag4</li>
<li id="li5">tag5</li>
<li id="li6">tag6</li>
<li id="li7">tag7</li>
<li id="li8">tag8</li>
<li id="li9">tag9</li>
<li id="li10">tag10</li>
</ul>

.myUl li{background:url("你的图标的链接") no-repeat 10px 5px;}
你只需改变10px或者5px的大小，即可调整图标的位置

追问

恩。谢谢。不过我在上面第一次追问的时候提到了。用background-image就很简单了

Answer 2

li中的文字你应该使用了超链接吧？设置<a>标签的margin-left可以实现

追问

暂时还真没设置成超链接，我实践了一下，用background-image来代替还是挺简单的，就是不知道list-style-image是不是真这么死板。

追答

li的list-sytle-image和文字之间是有间距的 如果不用别的标签我也没想到什么好方法

追问

那么你说的a标签 margin-left 不会是设为负数吧。。list-sytle-image的位置移动貌似只有通过移动ul来实现？

追答

是设为负数的 list-style-image和文字的相对距离是不变的 可以移动ul来实现图片的位置的改变 也可以设置ul的padding-left 或者是li的margin-left 主要看你想相对谁来移动

追问

恩。没记错的话，因为我设置了li的border-bottom，所以移动文字时，用的是li的padding-left。list-style-image的位置话说不受这个影响，一直在ul外面，紧贴着ul边框。。。恩。应该就是动ul的位置，不过这样会产生更大的排版问题。。。确实不好用