Question

我正在尝试使用jQuery mobile开发移动应用程序，并且我在官方文档中使用了导航栏选项卡小部件代码。我的问题与导航栏有关，因为它没有显示应该是！两个标签不在同一行内！（同样，我使用了文档中的代码并仅对其进行了调整）..

Screenshot of the displayed page

resultatsScurtin.html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>Authentification</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.css">
<link href="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile.structure-1.4.4.min.css" rel="stylesheet" />
<script src="../CasaElectionsMobileApp/public/jquery-2.1.1.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="../CasaElectionsMobileApp/public/jquery.mobile-1.4.4/jquery.mobile-1.4.4.js"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header" data-theme="b">
        <h1>Casa Elections App</h1>
    </div><!-- /header -->
    <div role="main" class="ui-content">
    <!--Tabs navigation-->
        <div data-role="tabs" id="tabs" >
          <div data-role="navbar" data-position="fixed">
            <ul>
              <li><a href="#one" data-ajax="false">BV</a></li>
              <li><a href="#two" data-ajax="false">PP</a></li>
              <!-- <li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li> -->
            </ul>
          </div>
          <div id="one" class="ui-body-d ui-content">
            
        <!-- Will use the id to call on AJAX-->
        <form id="form1" data-ajax="false" method="post">
            <h3><center>Résultats après dépouillement</center></h3>

            <label for="txt-cin">N° de CIN</label>
            <input type="text" name="txt-cin" id="txt-cin" value="" placeholder="Taper votre nom d'utilisateur">

            <button class="ui-btn ui-mini">Rechercher</button>
        </form>

          </div>
          <div id="two">
            <form id="form2" data-ajax="false" method="post">
                <h3><center>Résultats après dépouillement</center></h3>

                <label for="txt-nbre-ve">Nombre de voix exprimées (En chiffres) :</label>
                <input type="text" name="txt-nbre-ve" id="txt-nbre-ve" value="" placeholder="Exemple : 456">

                <label for="txt-nbre-bn">Nombre de bulletins nuls (En chiffres) :</label>
                <input type="text" name="txt-nbre-bn" id="txt-nbre-bn" value="" placeholder="Exemple : 457">

                <label for="txt-nbre-insc">Nombre d'inscrits (En chiffres) :</label>
                <input type="text" name="txt-nbre-insc" id="txt-nbre-insc" value="" placeholder="Exemple : 458">

                <label for="txt-nbre-votants">Nombre de votants (En chiffres) :</label>
                <input type="text" name="txt-nbre-votants" id="txt-nbre-votants" value="" placeholder="Exemple : 459">

                <button class="ui-btn ui-mini">Valider</button>
            </form>

          </div>
        </div>


    </div>

    <div data-role="footer" data-id="foo2" data-position="fixed" data-theme="b">
        <div data-role="navbar">
            <ul>
                <li><a href="accueil.html">Accueil</a></li>
                <li><a href="identificationElecteurs.html">Identification</a></li>
                <li><a href="resultatsScrutin.html">Résultats</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->

</div>
</body>
</html>

提前致谢！

导航栏中的标签显示效果不佳：jQuery Mobile

0 个答案: