Question

嗨我在尝试使用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>

Answer 1

问题是你有这个规则：

ul {
    margin: 0px;
}

列表标记的默认位置是：list-style-position : outside，这意味着标记不在列表的边距内（因为边距为0）。您可以通过将ul的边距更改为图像的宽度或将位置设置为内部来解决此问题。看我的工作小提琴：

http://jsfiddle.net/crazytonyi/QnzB2/

使用多个图像而不是子弹点CSS

1 个答案: