导航栏中的选项卡显示不好:jQuery Mobile
我正在尝试使用jQuery mobile开发一个移动应用程序,我在官方文档中使用了导航栏选项卡小部件代码。 我的问题与导航栏有关,因为它没有按应有的方式显示!这两个选项卡不在同一行内!(同样,我使用了文档中的代码并仅对其进行了调整) resultatsScurtin.html代码:导航栏中的选项卡显示不好:jQuery Mobile,jquery,html,css,jquery-mobile,Jquery,Html,Css,Jquery Mobile,我正在尝试使用jQuery mobile开发一个移动应用程序,我在官方文档中使用了导航栏选项卡小部件代码。 我的问题与导航栏有关,因为它没有按应有的方式显示!这两个选项卡不在同一行内!(同样,我使用了文档中的代码并仅对其进行了调整) resultatsScurtin.html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Authentification
<!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>
认证
卡萨选举应用程序
阿普勒苏丹酒店
N°de CIN
回收机
阿普勒苏丹酒店
出口名称(中文):
编号(中文):
名称(中文):
名称为votants(En chiffres):
瓦利德
提前谢谢 。你在页面上设置了一些缩放吗?因为我看不到你的图像那么大(我用的是Chrome)@Sga不,我没有在页面上设置一些缩放。。我实际上使用的是Chrome的模拟器,我测试代码的设备型号实际上是三星(虽然我不认为这应该是个问题,对吗?jQuery mobile不是被认为与所有设备都兼容吗?)顺便说一句,我和你一样试过Apple 6,但还是遇到了同样的问题…我尝试了Chrome41.0.2272.118和Canary44.0.2363.0上的所有设备。。。它对我有效吗?这真的很奇怪:(:(试着转到jQM 1.4.5,然后在真正的设备上测试它。。。