Html 我能'；t复制以下导航栏，尝试了所有操作。[引导程序3导航]

在过去的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 -->

@对于（$i=0；$i）

它的工作原理如下：

li

标签本身具有透明的圆形背景。（例如

具有蓝色圆圈）

透明的房屋图标被放置在圆圈背景上。（它们需要以圆圈为中心，可能需要一些空白？）

Konut

是一个菜单名，意思是

House

（类型不重要，我试过使用

h4

和

span

）

下面的数字是总列表的数量。（基本上是一个跨度）

我重写了我的导航栏10次。尝试了块级图像分割、内联块分割、边距分割、相对定位、绝对定位、使用方块模型……我真的要把头发撕下来了

（我无法从他们的造型中了解太多）

谁能给我一个JSFIDLE示例，或者告诉我应该做什么？或者我的HTML标记有问题吗

多谢各位

---

注：如果有必要的话，我会使用Bootstrap 3。

在没有看到您的代码的情况下，以下是您应该做的：

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

就像你说的：

• li标记本身具有透明的圆形背景。

  从类派生的背景位置

• 透明的房屋图标放置在这些圆形背景上。

  背景位置+填充

• Konut是一个菜单名，意思是House

  这里没有什么特别的

• 下面的数字是总列表的数量。

  这里也没什么特别的，只是要小心将其正确定位

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

---

当然，如果你不喜欢使用精灵表，而是使用单独的图像，那也没关系。唯一的区别是你会通过它们的URL指定背景图像，而你给我们的网站是通过它们的精灵表位置来指定它们。

为什么不给我们你到目前为止拥有的JSFIDLE，我们可能会从re？因为我重写了大约10次，所以它非常粗糙。如果我重新连接IDE一段时间，我可能会找到一个好看的版本。是的，这将非常有用，因为这似乎不是一件难做的事情。关键是使用适当的背景位置在适当的位置表示适当的图像（在这里找到适当的方式）.没什么了。不需要修改边距，只需将填充和背景位置结合起来。这不是最好的，但我在历史上发现了这一点。请确保增加“结果”的大小窗格。我不知道这有多可靠，不得不暂时控制垃圾邮件Z。谢谢你的回复。不幸的是，我无法提供比我在评论部分发布的更好的示例。我的IDE不支持比这更多的历史。嗯，这只是最基本的代码…你能按照我给你的指导方针，至少添加一些图像背景吗nds，试着把事情定位正确…那里有很多工作，解决问题也有很多工作，而不是编写整个代码。我将尝试使用您给我的信息复制这一点。我是否需要

li

中的任何块或内联块？不，只需遵循它们的结构。至少尝试向JSFIDLE添加适当的图像。@Imaqt派没问题！我对它做了更多的调整（浪费时间等待构建）：