list-style中图片大小以及位置的问题
来源：3-9 list-style
qq_然而星坠早已看穿一切_0
2017-10-30 21:19:11
问题一：请问如何改变图片的大小（比例缩小或者切割）以让列表图片适应列表的宽度。如我在练习3-9中的如果引入练习2-5中的背景图片（附代码），结果发现整个图片都会显示导致列表被撑的很大，有没有什么办法？
问题二：列表中图片我怎样才能向背景图片一样进行位置的调控？比如说练习3-9中结果发现五角星的位置如果能向下移动一点感觉会对得更齐。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
<style>
ul li {
list-style:circle url(http://climg.mukewang.com/58dc9d360001d65806500650.jpg) outside;
}
</style>
</head>
<body>
<ul>
<li>电视</li>
<li>冰箱</li>
<li>洗衣机</li>
<li>空调</li>
</ul>
</body>
</html>写回答
1回答
-
白船袜七分裤
2017-10-30
答一：这个列表图片标记是无法设置宽高的，因为你用的是url指向的图片。只能改变原图片的大小，再引用。
实际中，用的都是非常小的图标(五角星等)，去随便添加一个图片作为标记显然是不合适的，除非你提前裁剪成小图。
答二：选用图片作为列表标记，位置的设置只有以下两种。
list-style-position:inside; /*文本环绕该图片标记对齐*/ /*或者*/ list-style-position:outside; /*文本不会环绕该图片标记对齐*/
其实你写一个列表，然后添加边框属性，将位置的值分别用上面两个值试一下就可以明显看出区别。
ul,li{border:1px solid red;}设为inside,可以看到标记跑到里面去了，outside在外面。
一定要自己动手试试。
希望能够帮到你。
0
相似问题
怎么设置背景图片大小啊
回答 3
3-9问题
回答 3