html - 在 列表中实现另一个对象

Question

这可能是一个新手问题，但我不习惯，我真的不知道如何实现...

我必须重现这个

代码由 smarty 生成，但非常清晰:

<ul>
   {foreach from=$subs.subs item="sub"}
     <li><img src="{$sub.image}"/>
     <a href="{$sub.url}">{$sub.name}</a>
     </li>
   {/foreach}
</ul>

但是这个问题真的很简单，无论我尝试过什么清晰或 float 的关联，我都没有得到这个，但像这样

这里有一点 Fiddle

我确信这很容易做到，但不知何故我做不到。我很乐意在这方面提供一些帮助；我该如何处理？

Answer 1

此 CSS 将对您有很大帮助:

a {
 display: block; 
}

li {
  display: inline-block;
}

完整代码:

a {
 display: block; 
}

li {
  display: inline-block;
}

<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>
<li>
    <img src="" width=100 height = 100/>
    <a href="">Caption text thingy</a>
</li>