使用多个图像,而不是项目符号点CSS
问题描述:
嗨,我试图让我的项目符号使用CSS的各种图像遇到了问题。这是我的代码,如果任何人都可以帮助我,这将是非常有益的感谢。使用多个图像,而不是项目符号点CSS
<html>
<head>
<title></title>
<style type="text/css">
ul {
list-style-type: Square;
padding: 0px;
margin: 0px;
}
.fastdiet {
list-style-image: url("fastdiet.jpg");
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
padding-right: 5px;
}
.Midnight {
list-style-image: url("Midnight.jpg");
padding-top: 3px;
padding-bottom: 3px;
padding-left: 20px;
padding-right: 5px;
}
</style>
</head>
<body>
<ul>
<li class="fastdiet">This book is Number 1</li>
<li class="Midnight">This book is Number 2</li>
</ul>
</body>
</html>
答
的问题是,你有这样的规则:
ul {
margin: 0px;
}
而对于列表标记的默认位置:list-style-position : outside
,这意味着该标记是不在列表的边界之内(自保证金为0)。您可以通过将ul的边距更改为图像宽度或将位置设置为内部来解决此问题。看到我的工作小提琴:
+0
谢谢安东尼你解决了我的问题,一旦我把列表样式位置:内部;它的工作,非常感谢 – 2013-03-16 22:28:13
问题是? – 2013-03-16 21:21:35
适用于我:http://jsfiddle.net/crazytonyi/QnzB2/ – Anthony 2013-03-16 21:29:35
实现了我在测试过程中对css进行了轻微更改。在以更清晰的方式询问之前,发布一个可以帮助其他人解决同样问题的答案。 – Anthony 2013-03-16 21:35:24