jQuery Mobile的頁腳項目爲1行

大家沒有顯示使用jQuery隱藏列表項溢出，它的工作很好，但我在2，而不是所有行的同一行中顯示的項目。jQuery Mobile的頁腳項目爲1行

任何人都知道爲什麼，它可能這樣做？

下面是完整的源代碼：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
</head> 
<body> 

<div data-role="page"> 

    <div data-role="header"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content"> 
     <p>Page content goes here.</p>  
    </div><!-- /content --> 

    <div data-role="footer"> 
     <div data-role="navbar"> 
      <ul class="footeritems"> 
       <li><a href="#" data-icon="grid" data-iconpos="top">One</a></li> 
       <li><a href="#" data-icon="grid" data-iconpos="top">Two</a></li> 
       <li><a href="#" data-icon="grid" data-iconpos="top">Three</a></li> 
       <li><a href="#" data-icon="grid" data-iconpos="top">Four</a></li> 
       <li><a href="#" data-icon="grid" data-iconpos="top">Five</a></li> 
       <li><a href="#" data-icon="grid" data-iconpos="top">Six</a></li> 
       <li><a href="#" data-icon="grid" data-iconpos="top">Seven</a></li> 
      </ul> 
     </div> 

    </div><!-- /footer --> 
</div><!-- /page --> 


<script> 
$(document).ready(function() { 
    $("ul.footeritems li:gt(3)").remove(); 
    $("ul.footeritems").listview('refresh'); 

}); 
</script> 
</body> 
</html>

來源

2011-12-25 Satch3000

你指的是HTML 5，對嗎？ – 2011-12-25 10:35:58

這是因爲jQuery Mobile的CSS支持頁腳導航欄中有一個最大的連續5個列表項。如果有更多的項目它打破它變成更多的行。刪除任何一個列表項，它會在單行

來源

2011-12-25 10:43:36

我知道你在說什麼，但我已經添加了jQuery來去除多餘的，它仍然在多行：O/ – Satch3000 2011-12-25 10:48:28

ListView的刷新不是爲導航欄或其他條作出。那就是做錯了什麼。目前沒有解決方案的導航欄。 – 2011-12-25 11:30:04

jQuery Mobile的頁腳項目爲1行

回答

相關問題