使用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

我想你忘了把position: relative到listItem和top:0爲title。

讓我知道您的反饋，歡呼！

.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」解決了這個問題。頂部：0似乎不是必要的。謝謝。 – TTT

使用HTML和CSS浮動圖像列表項的文本？

回答

相關問題