顶部是否可以在此图像中生成无序列表? alt text http://i44.tinypic.com/fnqzbo.png 我不能使用2张图片用于单个 li标签 如果我使用箭头作为背景和填充左边,那么边框底部也会出现在图像下面.
alt text http://i44.tinypic.com/fnqzbo.png
我不能使用2张图片用于单个< li>标签
如果我使用箭头作为背景和填充左边,那么边框底部也会出现在图像下面.
我猜不能使用margin-left和background-position?
有任何想法吗 ?
谢谢
我已经为您上传了一个示例,您可以在以下位置查看和下载:http://joegreen.co.uk/stackoverflow/img-list/img-list.html
这是CSS和标记供参考.它已经在Firefox 3.6,Safari 4,Chrome,IE7和IE8中进行了测试.
CSS:
#list-container { width: 460px; padding: 15px 15px 15px 30px; background-color: #f6f4ea; border: 1px solid #e3e1d5; font: 12px Verdana, Geneva, sans-serif; } #list-container ul { list-style: disc outside url('./bullet.gif'); margin: 0; padding: 0; } #list-container ul li { margin: 7px 0 0 0; padding: 0 0 7px 0; border-bottom: 1px dotted #7a7974; }
HTML:
<div id="list-container"> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> <li>Donec tellus felis, euismod non egestas sed, suscipit a leo. Ut quis augue vel mauris mollis volutpat.</li> <li>Morbi varius porttitor massa, sed lobortis magna ornare et.</li> <li>Fusce blandit risus varius felis posuere vehicula iaculis turpis bibendum. Integer a molestie nunc.</li> <li>In blandit neque ac dui laoreet tincidunt dapibus leo pulvinar. Sed nec ligula non orci vulputate vulputate.</li> </ul> </div>