JQuery 移动设备:页脚内的导航栏最后一个元素显示不正确
JQuery Mobile : navbar inside footer last element displaying incorrectly
我正在使用 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),行为都是相同的。
有人能帮忙吗?
问题不是由 JQuery 移动设备引起的,而实际上是由显示常规 space 字符和 UNICODE space 字符的文本编辑器(在本例中为 Sublime Text 3)引起的一样的方法。
UNICODE spaces——从源文档复制粘贴后遗留下来的——被浏览器转换为
s,然后导致行-包装问题。
用 space-bar spaces 替换 HTML 中的 UNICODE spaces 解决了这个问题。
对于 Sublime Text 用户,为避免以后出现这种情况,请安装 Unicode Character Highlighter 包。
我正在使用 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),行为都是相同的。
有人能帮忙吗?
问题不是由 JQuery 移动设备引起的,而实际上是由显示常规 space 字符和 UNICODE space 字符的文本编辑器(在本例中为 Sublime Text 3)引起的一样的方法。
UNICODE spaces——从源文档复制粘贴后遗留下来的——被浏览器转换为
s,然后导致行-包装问题。
用 space-bar spaces 替换 HTML 中的 UNICODE spaces 解决了这个问题。
对于 Sublime Text 用户,为避免以后出现这种情况,请安装 Unicode Character Highlighter 包。