Question

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

我尝试将文本放在spans，paragraph中，甚至尝试使用break标记。

这是我的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

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

1 个答案: