Question

我在我的网站上使用了一个小部件，我无权访问主代码。

但是我可以根据自己的喜好来设计它。我试图移动图像下面的文字，但我似乎无法得到它。

这是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添加到列表中以使其显示为内联。因为我希望图像水平显示。但是现在，具有人名的span类显示在图像旁边。

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

我的目标是将其置于图像下方。我试图尝试通过css添加行间距，但不认为这是正确的方法。

Answer 1

<span>标记默认为inline，<img>也是如此。但是，通过制作图片display: block;，他们将占据您列表项的全部宽度，从而使您的<span>标记跳下来。

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

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

正如AndrewTet所指出的，这将使您的列表项目显示在彼此之下。要解决此问题，只需将其display属性设置为inline-block：

即可

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

Answer 2

将css更改为此。

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

Codepen：http://codepen.io/supah_frank/pen/VYYXLK

Answer 3

超级基本解决方案：

CSS（根据需要更具体）：

li {
    display: inline-block;
    vertical-align: top;
}

li img {
    display: block;
}

这允许你的＆lt; li＆gt;标签以水平方式流动，而其中包含的img将显示为块，导致任何后续元素在页面下方流动。

Answer 4

使用此功能更新您的CSS。

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

这将移动图像下方的文本，水平显示图像。这是JSFiddle链接。的 Demo

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

4 个答案: