Question

我觉得我不得不问这个问题，但我总是不惜一切代价逃避CSS，而且我现在发现自己又需要它了，我一直在捡谷歌一个没有运气的例子。

基本上我有特定于每个类别的图标，并希望使用这些图标在CSS / HTML中创建水平导航栏，同时也在其下方显示文本链接。我找到了一个或另一个片段，但每次我尝试将两者结合在一起时，整个页面似乎都会崩溃。

任何人都可以提供一个如何做到这一点的例子吗？如果它有帮助，它基本上看起来像......

[-IMAGE-]     [-IMAGE-]     [-IMAGE-]
[-TEXT-]      [-TEXT-]      [-TEXT-]

Answer 1

http://jsfiddle.net/LajUZ/2/

HTML：

<ul class="nav">
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
    <li class="navitem">
         <div class="icon">
              [icon]
         </div>
         <div class="text">
               [text]
         </div>
    </li>
</ul>

CSS：

.navitem
{
    float: left;
}

Answer 2

通过background-position在CSS中轻松完成效果，并将padding-top元素应用于li元素：

background-position: top;
padding-top: 50px; /* Height of image */

这是example fiddle。

<强>更新

以下是the more descriptive fiddle，其中包含不同li个元素的不同图像。

CSS中带有图像+文本的水平导航栏

2 个答案: