0

在过去的 4 个小时里，我一直在为此工作。从字面上尝试了一切，但我无法复制此导航栏。

在此处输入图像描述

这个导航栏有一个这样的 HTML；

<div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
        @for($i = 0; $i <= 2; $i++) <!-- below loops 3 times for testing purposes -->
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                      //Styling goes here.
                </a>

                <ul class="dropdown-menu">
                    <li><a href="#">Sublink</a></li>
                </ul>
            </li>
        @endfor
    </ul>
</div><!-- /.nav-collapse -->

它是这样工作的：

  1. li标签本身有透明的圆形背景。（例如<li class="blue">有蓝色圆圈）
  2. 透明的房子图标被放置在那些圆形背景上。（他们需要以圆圈为中心，可能需要一些边距黑客？）
  3. Konut是一个菜单名，意思是House（类型无所谓，我试过用h4and span）
  4. 下面的数字是总列表的数量。（这基本上是一个跨度）

我重写了我的导航栏 10 次。尝试过块级图像 div、内联块 div、margin hacks、相对定位、绝对定位、使用框模型......我真的要扯掉我的头发了。

现场版可以在这里找到（我不太了解他们的造型）

谁能给我一个 JsFiddle 示例或告诉我应该做什么？还是我的 HTML 标记有问题？

谢谢你。

附言。如果重要的话，我使用 Bootstrap 3。

4

1 回答 1

1

在没有看到您的代码的情况下，您应该执行以下操作：

你需要制作一个正确的精灵表。请注意原始元素中元素的距离如何与导航栏的高度一样。这不是强制性的，但它解决了可能出现的垂直定位/裁剪问题。

就像你说的：

  • li 标签本身有透明的圆形背景。background-position derived from class
  • 透明的房子图标被放置在那些圆形背景上。background-position + padding
  • Konut是一个菜单名称，意思是房子nothing special here
  • 下面的数字是总列表的数量。also nothing special here, just be careful to position it properly

这只是你需要知道的事情的清单。一旦我看到你到目前为止做了什么，我会扩大我的答案。

当然，如果您不想使用 spritesheet，而是使用单独的图像，那也可以。唯一的区别是您将通过它们的 URL 指定背景图像，而您提供给我们的站点是通过它们的 spritesheet 位置指定它们。

于 2013-09-12T16:45:10.517 回答