Question

这是我想要做的：我想在列表中有一些图像，我希望在每个图像下方都有文本，并且非常靠近每个图像。

我曾尝试使用<figure>和<figcaption>，但这会让事情变得混乱。

这是我在html中的列表：

<div class="verticalStrip">
    <br>
    <ul>
        <li><img src="image1.png" alt="im1"/></li>
        <li>text1</li>
        <li><img src="image2.png" alt="im2"/></li>
        <li>text2</li>
    </ul>
</div>

这就是我得到的：

enter image description here

这就是我想要的：

enter image description here

我很感激你的帮助。

UPDATE1： 在其中一个答案中应用建议后，将其添加到css：

img { 显示：块; }

我明白了：

enter image description here

Answer 1

鉴于改变了HTML：

<div class="verticalStrip">
    <br>
    <ul>
        <li><img src="image1.png" alt="im1"/>text1</li>
        <li><img src="image2.png" alt="im2"/>text2</li>
    </ul>
</div>

我建议使用CSS：

img {
    display: block;
}

JS Fiddle demo

关于OP提出的问题，在评论中（下文）：

有没有办法在text1和image2之间创建一些间距？

当然，答案是肯定的，＆＃39;只需为margin-bottom元素分配<li>，例如：

li {
    margin-bottom: 2em;
}

JS Fiddle demo

或者，如果您更愿意，可以使用padding-bottom代替：

li {
    padding-bottom: 2em;
}

JS Fiddle demo

Answer 2

也许是一张桌子？试试这个。

<html>
<head>
<body>
<div class="verticalStrip">
    <br>
    <table>
        <tr><td><img src="image1.png" alt="im1"/><br/>text1</td></tr>

        <tr><td><img src="image2.png" alt="im2"/><br/>text2</td> </tr>
    </table>
</div>    
</body>
</html>

在HTML中的列表中添加图像下方的文本

2 个答案: