css 如何设置ul的列表图标和列表文字对齐

Posted 2023-04-30

1、将li的height和line-height设置成为和设计稿一样的
2、将列表图标整体切出来，铺在ul上，不平铺
3、使用background-position控制ul背景和li中的文字对齐即可。。。 参考技术A 通常的方法是用list-style-type
但是那个很丑陋，而且无法控制，现在都是用LI的背景图了
定义LI的background属性，为background:url ("../img/xxx.jpg") left
然后通过背景图片定位left和top的像素就可以了，记得加上no-repeat样式

div + css，UL的LI 中，对LI设置了list-style-image，LI中的文字是放在a标签中的，如何让图片和文字对齐？

把li设置个高度，然后把a设置设置同样的高度，最后让两个里面的文字上下居中
li,li a height:25px;line-height:25px;
也可能只要设置li的高度并上下居中就可以了，你试试

一般设置文字上下居中都是height和line-height相同就可以了 参考技术A 不建议使用list-style-image，你可以直接给li定义背景 参考技术B list-style-image 这个可以用position 来设置图片位置 ： list-style-position: 5px 5px;

但是 list-style-image 各种属性在各种浏览器效果不一，
所以我们抛弃list-style-image ，而改用插入一个小图片。
例如：<li style="height:20px; line-height:20px;"><img align="left"> <a href="#">标题标题一标题标题一标题标题一</a></li>

解释：
首先你要设置一个高度 Height =20px
然后 就是行高LINE-HEIGHT =20px

然后是关键了，因为多数人只去想如何CSS 设置，没有去考虑属性。
图片增一个属性 align 。
align="left " 或 align="absmiddle" 具体用哪个你去试试就知道了。
align 属性是非常重要， HTML 并没有抛弃它。

－－－全部手写，如果还有问题，请追问。本回答被提问者采纳 参考技术C 可以贴出你的代码吗？