导航栏元素不在行 - Jquery mobile答案

【问题标题】：Navbar elements are not in line - Jquery mobile导航栏元素不在行 - Jquery mobile
【发布时间】：2015-12-14 15:30:23
【问题描述】：

我正在使用 Jquery mobile 开发应用程序，导航栏未显示行中的元素，而 google chrome 控制台显示列表元素之间的空格。通过删除这些 &nbsp 元素完全一致。在这里你可以看到： Navbar----Console

<div role="main" class="ui-alt-icon ui-nodisc-icon">
            <div data-role="navbar" data-grid="c">
                <ul>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">One</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Two</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Three</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Four</a></li>
                </ul>
            </div><!-- /navbar -->
        </div>

有人可以帮忙吗？

【问题讨论】：

标签： css html jquery-mobile navbar jquery-mobile-navbar

【解决方案1】：

对于响应式导航，您不必使用 jQuery 执行此操作。为了获得最佳结果，您可以为此使用标准标记和 CSS。使用 CSS 的 display 属性和媒体查询，您可以在特定宽度或高度上显示和隐藏导航切换。请参阅this tutorial 以获得更深入的答案。

【讨论】：

谢谢，我会考虑的！

【解决方案2】：

似乎有一条 CSS 规则 :before（还有 :after）将其他内容插入到您的列表元素中（在本例中为 &nbsp;spaces）

（或做同样事情的 jQuery 函数）

【讨论】：

是的，我发现了一些 :active 主题 css 的规则，但不是 :before.. 无论如何我会使用标准 css！谢谢！

【解决方案3】：

当您将 jQuery Mobile 演示中的粘贴复制到您的文本编辑器（当然是 Sublime）中时，它将携带字符并将它们转换为 nbsp；即使您选择原始代码。

先将文本粘贴到记事本甚至 Google Mail 撰写窗口中，然后重新复制并粘贴，然后随机 nbsp；字符将消失。

【讨论】：