Html 仅使用css在图像下方移动文本

我在我的网站上使用一个我无法访问主代码的小部件

不过，我可以用css根据自己的喜好来设计样式。我试图将文本移到图像下方，但似乎无法获得它

以下是html：

<div class="dd-widget dd-box dd-top-fundraisers dd-widget-complete" data-type="topFundraisers" data-event-id="503">
    <h1> Top Fundraisers</h1>
    <ul>
        <li><a class="dd-avatar-link" href=""><img src="img.jpg" scale="0"><span class="tf-full-name">person name</span></a></li>
        <li><a class="dd-avatar-link" href=""><img src="img.jpg" scale="0"><span class="tf-full-name">person name</span></a></li>
        <li><a class="dd-avatar-link" href=""><img src="img.jpg" scale="0"><span class="tf-full-name">person name</span></a></li>
        <a class="dd-view-more-link btn" href=""> View More</a>
    </ul>
</div>

---

我的目标是把它放在图像下面。我曾尝试通过css添加行空间，但我认为这不是正确的方法

将css更改为此

div.dd-widget li {display:inline-block;}
div.dd-widget img {display:block;}

代码笔：

超碱性溶液：

CSS（根据需要更加具体）：

这允许您的

标记水平流动，而其中包含的img将显示为块，从而导致页面上以下任何元素流动。

默认情况下，

标记是内联的，就像

一样。但是，通过使图像

显示：block它们将占据您列表项的全部宽度，使您的标签跳下

这是通过以下方式实现的：

div.dd-widget li img {
   display: block;
}

正如Andrewet所指出的，这将使您的列表项显示在彼此下面。要解决此问题，只需将其
显示
属性设置为
内联块
：

div.dd-widget li {
   display: inline-block;
}

用这个更新你的CSS。

div.dd-widget li {
    display: inline;
    float: left;
}
div.dd-widget li img{
    display: block;
}

这将在图像水平显示的情况下移动图像下方的文本。
这里是JSFiddle链接
不错，别忘了垂直对齐！；）我没有使用垂直对齐，因为原始文章中的代码没有指定应该对齐的位置。为了避免混淆，我想我会尽可能给出最基本的答案，让@Sackling从这里开始。您是正确的，但在使用中，可能需要垂直对齐。嘿@piers，这实际上不太有效，您可以在这里看到：。将块元素添加到img会将文本向下推到下一行，但也会将lis向下推到下一行。您需要添加类似于
div.dd-widget li{display:inline block；}
的内容，因此将img更改为
display:block
不会强制lis下线。@AndrewTet您是对的。谢谢你指出这一点。我已经更新了我的答案。HTML无论如何都是无效的，
a
标记不能是
ul
的直接子项。
div.dd-widget li {
   display: inline-block;
}

div.dd-widget li {
    display: inline;
    float: left;
}
div.dd-widget li img{
    display: block;
}