2012-04-07 10 views
1

Das Problem:jQuery Mobile NavBars Padding Falsch: Too Narrow

Meine NavBars sehen nichts, wie die NavBars im Beispiel bei http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

Was mache ich falsch/anderes zu tun?

Die JS Fiddle:http://jsfiddle.net/OpnSrce/dUcUF/

Der Code:

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <meta name = "viewport" content = "width=device-width, initial-scale=1"> 
     <title>AD&amp;D Spellbook</title> 
     <style> 
      @import url('http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css'); 
     </style> 
     <script src = "http://code.jquery.com/jquery-1.7.1.min.js"></script> 
     <script src = "http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script> 
    </head> 

    <body> 
     <div data-role = "page" data-theme = "b"> 
      <div data-role = "header" data-position = "fixed" data-theme = "b"> 
      </div> 
      <div data-role = "content" data-theme = "b"> 

      </div> 
      <div data-role = "footer" data-position = "fixed" data-theme = "b"> 
       <div data-role = "navbar"> 
        <ul> 
         <li>All Spells</li> 
         <li>Memorized Spells</li> 
         <li>Known Spells</li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

Antwort

2

Ok ich meine Antwort erste Version war falsch geändert. Was Sie vermissen, ist <a> Tags in Ihrer Fußzeile.

<div data-role="navbar"> 
    <ul> 
     <li><a href="">All Spells</a></li> 
     <li><a href="">Memorized Spells</a></li> 
     <li><a href="">Known Spells</a></li> 
    </ul> 
</div>