-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 に答える