Question

我目前在我的网站上工作，我正在尝试将图像显示在列表项的顶部。

这是一个显示我的问题的jsfiddle：http://jsfiddle.net/L6qvzjz4/

<li> TEXT <img src="link"> </li>

immage出现在第一个列表项旁边，但我希望它直接出现在文本的顶部。有什么方法可以解决这个问题吗？

提前谢谢！

Answer 1

有很多方法可以做到这一点。如果你想在列表中包含img：

HTML

<ul>
    <li><img src=""></li>
    <li>Text</li>
    ...
</ul>

CSS

ul li:nth-of-type(1) {
    list-style: none;
}

http://jsfiddle.net/L6qvzjz4/1/

但最好的方式是使用数字和 figcaption 标记。在这个例子中，我将文本和图像集中在一起：

HTML

<ul>
    <li>
        <figure>
            <img src="http://www.placehold.it/50x50"/>
            <figcaption>
                Some description
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://www.placehold.it/50x50"/>
            <figcaption>
                Some description
            </figcaption>
        </figure>
    </li>
    <li>
        <figure>
            <img src="http://www.placehold.it/50x50"/>
            <figcaption>
                Some description, some description, some more description
            </figcaption>
        </figure>
    </li>
</ul>

http://jsfiddle.net/00xuxwb6/

Answer 2

您可以将图片放在单独的

中，如下所示：

<ul><li><img src="https://www.google.ca/search?q=happy+face&espv=2&biw=1280&bih=579&source=lnms&tbm=isch&sa=X&ei=TU7pVI-vHcG2yATetID4Dg&ved=0CAYQ_AUoAQ#imgdii=_&imgrc=Mv3LpH0uH8yauM%253A%3BVE7ZGYGvYa5sVM%3Bhttp%253A%252F%252Fupload.wikimedia.org%252Fwikipedia%252Fcommons%252Fthumb%252F8%252F85%252FSmiley.svg%252F2000px-Smiley.svg.png%3Bhttp%253A%252F%252Fen.wikipedia.org%252Fwiki%252FSmiley%3B2000%3B2000"</li> 
<li> Picture1</li>
<li> Picture2</li>
<li> Picture3</li>

Answer 3

是的，你可以很容易地做到这一点。只需在列表项上使用position:relative;，在图像上使用position:absolute;即可。然后使用top和left：

将图片放在所需的位置

li{
    position:relative;
}

img{
    position:absolute;
    top:0px;
    left:0px;
}

http://jsfiddle.net/L6qvzjz4/2/

Answer 4

您可以添加以下CSS：

img {
    position: absolute;
    left: 0;
    top: 0;
}

li {
    position: relative;
}

https://jsfiddle.net/lemoncurry/8fqz37fe/2/

Answer 5

你可以简单地给你的li和img提供相同的宽度。并将文字放在你的图像之后。例如，你的代码可能是

ul{
    width: 300px;
}
ul li{
    width: 100%;
}
ul li img{
    width: 100%;
}

<ul> 
    <li><img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
    Picture1 </li> 
    <li> Picture2</li>
    <li> Picture3</li>
</ul>

如何使图像显示在HTML列表项的顶部

5 个答案: