-2

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

1 回答 1

0

问题是你有这个规则：

ul {
    margin: 0px;
}

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

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

于 2013-03-16T21:34:30.507 回答