JQuery Mobile：导航栏内页脚最后一个元素显示不正确

我使用的是JQuery Mobile 1.4.5，而且我没有任何类型的自定义CSS。代码：JQuery Mobile：导航栏内页脚最后一个元素显示不正确

<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>

在导航栏列表中的最后一个元素显示在下一行，仿佛包裹文本。

enter image description here

我想不出是什么原因造成的最后一个元素为错位这样。

我曾尝试过在页面上的各种不同元素以及列表中的2,3,4和5个元素。无论浏览器（Safari还是Chrome），行为都是一样的。

任何人都可以帮忙吗？

来源

2015-03-03 dneaster3

我试着在Chrome，Safari和Firefox中给出的代码，它看起来不错。也许它与周围的HTML有关？这里你的代码是[Fiddle]（http://jsfiddle.net/uzofauya/） – 2015-03-03 01:46:26

这个问题不是由JQuery Mobile引起的，而是实际上由文本编辑器（在这种情况下是Sublime Text 3）以相同的方式显示一个常规空格字符和一个UNICODE空格字符。

UNICODE空间 - 从源文档的复制粘贴中遗留下来 - 被浏览器转换为 ，然后导致换行问题。 enter image description here

用HTML中的空格键替换UNICODE空格解决了问题。 enter image description here

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

来源

2015-03-03 14:48:11 dneaster3

这是一个重复的问题和答案，但其他人的标题是这样的，他们没有出现在我的搜索中。链接在下面的评论。 – dneaster3 2015-03-03 14:49:07

[jquery移动标签不对齐]（http://stackoverflow.com/questions/28444020/jquery-mobile-tabs-are-not-aligned） – dneaster3 2015-03-03 14:52:01

[我如何删除不可见“ ”已被自动添加到代码]（http://stackoverflow.com/questions/28110467/how-do-i-remove-invisible-nbspnbsp-which-has-been-automatically-added-to-c） – dneaster3 2015-03-03 14:52:06

JQuery Mobile：导航栏内页脚最后一个元素显示不正确

回答

相关问题