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：導航欄內頁腳最後一個元素顯示不正確

回答

相關問題