0

我正在使用 JQuery Mobile 1.4.5，并且我没有任何类型的自定义 CSS。代码：

<div data-role="page" id="page-id">
    ...
    <div data-role="footer" data-position="fixed" style="overflow:hidden;" data-hide-during-focus="false">
      <div data-role="navbar">
        <ul>
          <li><a href="#" class="ui-btn-active">Navbar 1</a></li>
          <li><a href="#">Navbar 2</a></li>
          <li><a href="#">Navbar 3</a></li>
          <li><a href="#">Navbar 4</a></li>
          <li><a href="#">Navbar 5</a></li>
        </ul>
      </div><!-- /navbar -->
    </div><!-- /footer -->
</div>

导航栏列表中的最后一个元素显示在下一行，就像文本包装一样。

在此处输入图像描述

我无法弄清楚是什么导致最后一个元素像那样错位。

我已经在页面上的各种不同元素以及列表中的 2、3、4 和 5 个元素中进行了尝试。无论浏览器（Safari 或 Chrome）如何，行为都是相同的。

任何人都可以帮忙吗？

4

1 回答 1

1

该问题不是由 JQuery Mobile 引起的，而是由文本编辑器（在本例中为 Sublime Text 3）以相同的方式显示常规空格字符和 UNICODE 空格字符引起的。

UNICODE 空格——从源文档的复制粘贴中遗留下来的——被浏览器转换为&nbsp;'s，然后导致换行问题。 在此处输入图像描述

用 HTML 中的空格键空格替换 UNICODE 空格解决了这个问题。 在此处输入图像描述

对于 Sublime Text 用户，为避免这种情况在未来安装Unicode Character Highlighter包。

于 2015-03-03T14:48:11.303 回答