Jquery 移动导航栏项目未正确放置-解网

问：

我正在使用 JQuery 移动框架创建一个网页。我需要在页脚内的页面底部放置一个导航栏。在这里，我提到了我的所有代码。我的问题是最后一个导航项没有正确放置。它有点向下移动。我无法确定我做错了什么。对不起，同一行中的所有行都排在最后。我这样做是因为否则，它会在预览区域上显示为表格

<!DOCTYPE html>
<html lang ="en">
   <head>
      <Title>PHI Admin panel</title>
      <meta http-equiv = "text/html"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      <meta name="author" content="Sidath"/>
      <meta name="description" content="NHSL PHI admin panel"/>
      <script type ="text/javascript" src ="../code.jquery.com_jquery-3.7.1.min.js"></script>
      <script type ="text/javascript" src ="jqm/jquery-migrate-3.0.0.js"></script>
      <script type ="text/javascript" src ="jqm/jquery.mobile-1.4.5.min.js"></script>
      <link rel ="stylesheet" type = "text/css" href ="jqm/jquery.mobile-1.4.5.css"/>
   </head>
   <body>
      <div data-role="page">
         <div data-role="header">
            <h1>PHI Admin</h1>
         </div>
         <!-- /header -->
         <div role="main" class="ui-content">
            <p>Page content goes here.</p>
         </div>
         <!-- /content -->
         <div data-role="footer">
            <div data-role="navbar">
               <ul>
                  <li><a href="#" data-icon="grid">Summary</a></li>
                  <li><a href="#" data-icon="star" class="ui-btn-active">Favs</a></li>
                  <li><a href="#" data-icon="gear">Setup</a></li>
               </ul>
            </div>
            <!-- /navbar -->
         </div>
         <!-- /footer -->
      </div>
      <!-- /page -->
   </body>
</html>

jquery jquery -移动

Jquery 移动导航栏项目未正确放置

Jquery mobile nav bar items not properly placed

评论