接宝地请教一个关于jqmobi的问题

使用了官方的例子
<div data-role="footer">
　 <div data-role="navbar">
　　 <ul>
　　　 <li><a href="a.html" class="ui-btn-active">One</a></li>
　　　 <li><a href="b.html">Two</a></li>
　　 </ul>
　 </div><!-- /navbar -->
</div><!-- /footer -->但是显示出来的对不齐，不知道为什么？

解决方案 »

  1.   

    应该怎么来找原因呢如何debug 初次接触 还请多指教
      

  2.   

    假定是google浏览器再window下面鼠标对着右面黑的那个快 点 右键  选择 【检查元素】
      

  3.   

    谢谢指导。这两个同样的标签，怎么会对不齐，是CSS有问题还是什么呢？
      

  4.   

    下面的代码也是对不齐 麻烦帮忙看看 谢谢
    <!DOCTYPE html> 
    <html>
    <head>
    <meta charset="utf-8">
    <title>jQuery Mobile Web 应用程序</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="jquery-mobile/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
    <script src="jquery-mobile/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="jquery-mobile/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
    <!-- 只要将当前站点配置为移动应用程序，则对 phonegap.js 的该引用将允许代码提示。
     要将该站点配置为移动应用程序，请转至“站点”->“移动应用程序”->“配置应用程序框架...”-->
    <script src="/phonegap.js" type="text/javascript"></script>
    </head> 
    <body> <div data-role="page" id="page">
    <div data-role="header">
        
            <div data-role="navbar">
    　　 <ul>
    　　　 <li><a href="#page2" class="ui-btn-active">page2</a></li>
    　　　 <li><a href="#page3">page3</a></li>
    <li><a href="#page4">page4</a></li>
    　　 </ul>
    　 </div><!-- /navbar -->
    </div>
    <div data-role="content">
    <ul data-role="listview">
    <li><a href="#page2"  data-transition="pop">第 2 页</a></li>
                <li><a href="#page3">第 3 页</a></li>
    <li><a href="#page4">第 4 页</a></li>
               
    </ul>
             
    </div>
    <div data-role="footer">
    <h4>footer</h4>
    </div>
    </div><div data-role="page" id="page2">
    <div data-role="header">
    <h1>第 2 页</h1>
    </div>
    <div data-role="content">
    内容
    </div>
    <div data-role="footer">
    　 <div data-role="navbar">
    　　 <ul>
    　　　 <li><a href="#" class="ui-btn-active">One</a></li>
    　　　 <li><a href="#">Two</a></li>
    　　 </ul>
    　 </div><!-- /navbar -->
    </div><!-- /footer -->
    </div><div data-role="page" id="page3">
    <div data-role="header">
    <h1>第 3 页</h1>
    </div>
    <div data-role="content">
    内容
    </div>
    <div data-role="footer">
    <h4>页面脚注</h4>
    </div>
    </div><div data-role="page" id="page4">
    <div data-role="header">
    <h1>第 4 页</h1>
    </div>
    <div data-role="content">
    内容
    </div>
    <div data-role="footer">
    <h4>页面脚注</h4>
    </div>
    </div></body>
    </html>