Question

我有两张图片，希望使用列表将其中一张放在另一张图片上。我正在使用的当前代码将第二个图像放在第一个图像的右边，而不是直接在它下面。

有什么想法吗？可能是基本但我是编程新手。感谢。

<ul>
<li>
<img width="178" height="178" alt="ZE40" src="images/ze40.jpg">
<img width="178" height="40" alt="ZE40" src="images/ze40i.jpg">
</li>
</ul>

Answer 1

这里有两个基本选项：

更改要阻止的图像的CSS显示属性。 jsFiddle example

img {
    display:block;
}

将每个图像放在自己的列表项中，并将垂直对齐设置为顶部。 jsFiddle example：

<ul>
    <li>
        <img width="178" height="178" alt="ZE40" src="images/ze40.jpg" />
    </li>
    <li>
        <img width="178" height="40" alt="ZE40" src="images/ze40i.jpg" />
    </li>
</ul>
img {
    vertical-align:top;
}

Answer 2

只需使用另一个<li></li>作为第二张图片

<ul>
<li>
<img width="178" height="178" alt="ZE40" src="images/ze40.jpg">
</li>
    <li>
        <img width="178" height="40" alt="ZE40" src="images/ze40i.jpg">
    </li>
</ul>

编辑：当您在1 <li>上使用2张图片时，它会将2张图片放在一起，但是当您使用第二张图片时，第一张图片会在第二张图片的顶部显示，就像您在在纸上为自己制作一份清单。

Answer 3

你应该试试这个：

<ul>
    <li>
        <img width="178" height="178" alt="ZE40" src="images/ze40.jpg">

    </li>
    <li>
        <img width="178" height="40" alt="ZE40" src="images/ze40i.jpg">
    </li>
</ul>

要删除它们之间的空格，您可以在CSS中执行此操作：

ul, li {
    margin: 0;
    padding: 0;
}

基本HTML - 无序列表，如何使我的图像垂直？

3 个答案: