使用 codeigniter 将文本放在图像链接下方

Question

好吧，有点愚蠢的问题，但我不能让这个为我的生活工作。我正在尝试将文本放置在导航图像下方。

我尝试将文本放在跨度、段落中，甚至尝试过中断标记。

这是我的ul

<ul id="mainImg">
  <li><?=anchor('home/artwork', $art); ?></li>
  <li><?=anchor('home/comps', $des); ?></li>
  <li><?=anchor('home/sites', $web); ?></li>
</ul>

我正在使用 codeigniter，因此图像被存储在变量中，然后我将它们传递到上面的链接中，以便它们可以点击。

我在这三个图像上的唯一样式是不透明度和显示：在 li 上内嵌，以便它们彼此相邻。每次尝试将文本放在它们下方时，它也会将其余图像推送到下一行。如果可能的话，我想避免这种情况。

如果您想看看我想要完成的工作，我确实有一个实时站点。 catlyndesigns.net 请记住，我目前正在重新编码该站点的整个后端，因此目前几乎没有任何工作。

感谢您的所有帮助！ :)

Answer 1

请改用display: inline-block。

示例： http://codepen.io/jonjaques/pen/JvocB

请注意，我在锚标记内使用了 span，因为它更具语义性。你也可以使用<p> 标签，重要的是包裹文本的元素需要有display: block