Tabs from navbar not well diplayed : jQuery Mobile

问题

I'm trying to develop a mobile app using jQuery mobile and I used navigation bar tab widget code in the official documentation. My issue is related to the navbar as it is not displayed as it should be! The two tabs are not within the same line ! (Again, I used the code from the documentation and adjusted it only)..

The resultatsScurtin.html code :

<!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>

Thanks in advance!

来源：https://stackoverflow.com/questions/29561420/tabs-from-navbar-not-well-diplayed-jquery-mobile

标签

jquery

html

css

jquery-mobile