0

私はこれまでにこのhtmlcssを持っています

<html><head><style type="text/css">
.img_list {    
    width: 50px;
    height: 50px;
    position: relative;
}

#img_list .icon {
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
}
li{
list-style:none;
}
</style></head>
<body>
<ul id="img_list">
    <li>
        <img src="images.jpg" alt="Image Title" class="img_list" />
        <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
        <a>Charlie Chaplin</a>
    </li>
    <li>
        <img src="images.jpg" alt="Image Title" class="img_list"/>
        <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
        <a>Charlie Bean</a>
    </li>
</ul>
</body>
</html>

これはレンダリングされた画像です！[ここに画像の説明を入力してください] [1]

私が欲しかったのは、各画像の右下にある画像自体の上に下矢印画像をオーバーレイすることでした。上、下、右左で遊んでみましたが、ブラウザのサイズと一致していません。これを正しく機能させるためにCSSを変更するにはどうすればよいですか。

4

3 に答える 3

1

これを試してください：

<html>
<head>
    <style type="text/css">
        #img_list li {
            list-style:none;
            position:relative;
            line-height:50px;
        }
        #img_list li .img_list {    
            width: 50px;
            height: 50px;
        }
        #img_list li .icon {
            width: 30px;
            height: 30px;
            position: absolute;
            z-index: 99;
            bottom: 20px;
            left:0;
        }
    </style>
</head>
<body>
    <ul id="img_list">
        <li>
            <img src="images.jpg" alt="Image Title" class="img_list" />
            <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
            <a>Charlie Chaplin</a>
        </li>
        <li>
            <img src="images.jpg" alt="Image Title" class="img_list"/>
            <img class="icon" src="Arrow.png" alt="You've done XYZ to this." />
            <a>Charlie Bean</a>
        </li>
    </ul>
</body>
</html>
于 2013-01-01T21:10:07.880 に答える
1

コンテナーに対して相対的にアイコンを配置しているため、その結果が得られます#img_list。css 定義に追加position:relative;して、定義から削除してみてください。li#img_list{

li{
    list-style:none;
    position:relative;
}

このライブ デモを参照してください (代替画像付き): http://jsfiddle.net/wm4rj/

于 2013-01-01T21:07:13.487 に答える
1

position: relative;リスト項目に追加するだけです。

li {
list-style:none;
position: relative;
}
于 2013-01-01T21:07:40.790 に答える