HTMLとCSSを使用した浮動イメージリストアイテム上のテキスト？

左に浮いているアイテムのリスト（ul/li）が必要です。各項目に画像（imgタグ、CSS背景なし）が含まれている必要があります。これらの画像にテキストを表示します。HTMLとCSSを使用した浮動イメージリストアイテム上のテキスト？

これまでのところ、私の現在のテストバージョンでは、このテキストはイメージではなくページの左端付近に表示されます。

ここでは私の現在のテストコード

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    <!-- I know that classes like list and listItem may seem redundant with tags but classes will be useful in final context. --> .list { 
 
     list-style-type: none 
 
    } 
 
    .list .listItem { 
 
     float: left; 
 
     display: inline; 
 
     margin: 0 5px 0 5px 
 
    } 
 
    .listItem img { 
 
     z-index: 3 
 
    } 
 
    .listItem .title { 
 
     position: absolute; 
 
     left: 0; 
 
     width: 100%; 
 
     color: #f00; 
 
     margin: 5px; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <ul class="list"> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    </ul> 
 
</body> 
 

 
</html>

そしてここでは、JSのフィドルです： https://jsfiddle.net/24u81rgn/2/

出典

2016-11-08 TTT

私はあなたがtitleためlistItemとtop:0にposition: relativeを置くことを忘れてしまったと思います。

ご意見、ご感想をお聞かせください。

.list { 
 
    list-style-type: none 
 
} 
 
.list .listItem { 
 
    float: left; 
 
    display: inline; 
 
    margin: 0 5px 0 5px; 
 
    position:relative; 
 
} 
 
.listItem img { 
 
    z-index: 3; 
 
} 
 
.listItem .title { 
 
    position: absolute; 
 
    left: 0; 
 
    top:0; 
 
    width: 100%; 
 
    color: #f00; 
 
    margin: 5px; 
 
}

<body> 
 
    <ul class="list"> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    <li class="listItem"> 
 
     <img src="https://lh3.googleusercontent.com/mCVsAtG1EpSwbaGIkSo1v2WFkwKG_khaAz0iP9F3uuDkxzfYarKAfIIJVuq0FfiC7gCLu5cP=s640-h400-e365" alt="" /> 
 
     <span class="title">Test text, test text</span> 
 
    </li> 
 
    </ul> 
 
</body>

出典

2016-11-08 15:54:15 kukkuz

"位置：listItemのに対して" は、それを解決しました。 top：0は必要ないようです。ありがとうございました。 – TTT

HTMLとCSSを使用した浮動イメージリストアイテム上のテキスト？

答えて

関連する問題