我在我的demo中使用jQm。它看起来像这样。具有良好的UI。＆＃34;新的，导出和导入按钮是水平的＆＃34;。滚动时请检查。 http://jsfiddle.net/FZQ8D/5/
唯一的问题是我的小组休息。
但是当我使用jqm div（data-role：header，content，fotter）。我css打破它＆＃34;新的，导出和导入按钮垂直..为什么？但我的面板问题解决了。 http://jsfiddle.net/FZQ8D/12/
<div data-role="page" id="home">
<div data-role="panel" id="mypanel" data-position="left" data-display="push" data-dismissible="true" data-theme="a" >
<!-- panel content goes here -->
<label class="testSuiteId">Test Suite</label>
<div id="tree">
<ul>
</ul>
</div>
</div><!-- /panel -->
<div data-role="header" data-theme="b">
<h1>Stacker</h1>
<a href="#mypanel" data-icon="" class="ui-btn-right gear"></a>
</div><!-- /header -->
<div data-role="content" >
<nav>
<ul>
<li class="new_h"><a href="#" class="active"><i class="new"></i>New</a>
</li>
<li class="export_h"><a href="#"><i class="export "></i>Export</a>
</li>
<li class="import_h"><a href="#"><i class="import "></i>Import</a>
</li>
<div class="cb"></div>
</ul>
</nav>
<div class="cb"></div>
<article class="testsuitbox">
<h1>TestSuite Name</h1>
<input name="" type="text" class="txtfield" id="testSuiteId">
</article>
<div class="contentbox">
<div class="actionbar">
<a href="#" class="home" id="home_h"></a><a href="#" class="previous" id="previous_h"><i
class="iconprev"></i>Previous</a><a href="#" class="next" id="next_h"><i
class="iconnext"></i>Next</a>
<a style="cursor: pointer;" id="oneLevelUp" class="oneLevelUp">Up level ^</a>
<div class="cb"></div>
</div>
<div id="secondPage">
</div>
<div id="thirdPage">
</div>
<div id="firstPage">
<div class="testsuittitle" id="testSuitConfiguration">
Test Suite Configuration
<!--button class="parallelbtn">
<!--i class="circlepointer"></i-->
<!--/button-->
<select name="flip-1" id="flip-1" data-role="slider" class="selectSequence_h">
<option value="Sequential">Sequential</option>
<option value="Parallel">Parallel</option>
</select>
</div>
<div class="contentsubbox" id="testCaseContainer">
</div>
</div>
</div>
</div>
<div data-role="footer" data-theme="b" id="firstPageFooter">
<button class="addtestbtn" id="addTestCase" data-theme="a" style="color: #ffffff!important;">Add Test Case</button>
</div>
</div>
答案 0 :(得分：2)
您需要修复此处的CSS文件：https://dl.dropboxusercontent.com/s/kk2kwhlagzsi9g1/default.css
导航栏CSS设置为：
header nav {
因为你不再拥有＆lt; header＆gt;你需要改变你的CSS。在我的上一个例子中，我已经替换了＆lt; header＆gt;使用 data-role =“header” div。现在你需要更改你的CSS，以便它可以查看这个新的div容器。
<div data-role="header" data-theme="b">
<h1>Stacker</h1>
<a href="#mypanel" data-icon="gear" class="ui-btn-left"></a>
</div><!-- /header -->
<div data-role="header" data-theme="b" class="header">
<nav>
<ul>
<li class="new_h"><a href="#" class="active"><i class="new"></i>New</a>
</li>
<li class="export_h"><a href="#"><i class="export "></i>Export</a>
</li>
<li class="import_h"><a href="#"><i class="import "></i>Import</a>
</li>
<div class="cb"></div>
</ul>
</nav>
</div>
.header{margin:0px; padding:0px; z-index:99999;}
.header .logobar{
background: #4fa0d5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: #4fa0d5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRmYTBkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZTU3OTkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4fa0d5 0%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fa0d5), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4fa0d5 0%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4fa0d5 0%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4fa0d5 0%,#1e5799 100%); /* IE10+ */
background: linear-gradient(to bottom, #4fa0d5 0%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fa0d5', endColorstr='#1e5799',GradientType=0 ); /* IE6-8 */
color:#fff; font-size:2.5em; text-shadow:1px 1px 0 #000;
}
.header .logobar a{ float:left; padding:0.5% 1%; background:#062e48; width:35px; display:block; height:34px; margin-right:10px;}
.header .logobar a i.toggleicon{background:url(../images/toggle-icon.png) no-repeat left 3px; display:block; width:34px; height:26px;}
.header nav{
background: #226088;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzIyNjA4OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxMzM3NGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #226088 0%, #13374e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#226088), color-stop(100%,#13374e));
background: -webkit-linear-gradient(top, #226088 0%,#13374e 100%);
background: -o-linear-gradient(top, #226088 0%,#13374e 100%);
background: -ms-linear-gradient(top, #226088 0%,#13374e 100%);
background: linear-gradient(to bottom, #226088 0%,#13374e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#226088', endColorstr='#13374e',GradientType=0 );
margin:0px; z-index:-1px; -moz-box-shadow:0px 0px 3px 1px #012944;
-webkit-box-shadow: 0px 0px 3px 1px #012944;
box-shadow: 0px 0px 3px 1px #012944}
.header nav ul li a{margin:0px; padding:0.5% 0px; display: inline-block; box-shadow: 1px 0px 0px #000;
font-size:1.5em; width:33.3%; float:left; font-weight:normal !important; display:block;text-align:center; color:#fff !important; text-shadow:1px 1px 1px #000 !important;}
.header nav ul li a:hover{color:#fff !important; text-decoration:none; background: #565656;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iIzU2NTY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjI2MjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #565656 4%, #262626 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#565656), color-stop(100%,#262626));
background: -webkit-linear-gradient(top, #565656 4%,#262626 100%);
background: -o-linear-gradient(top, #565656 4%,#262626 100%);
background: -ms-linear-gradient(top, #565656 4%,#262626 100%);
background: linear-gradient(to bottom, #565656 4%,#262626 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#262626',GradientType=0 ); }
.header nav ul li a.active{
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iIzU2NTY1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyNjI2MjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #565656 4%, #262626 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%,#565656), color-stop(100%,#262626));
background: -webkit-linear-gradient(top, #565656 4%,#262626 100%);
background: -o-linear-gradient(top, #565656 4%,#262626 100%);
background: -ms-linear-gradient(top, #565656 4%,#262626 100%);
background: linear-gradient(to bottom, #565656 4%,#262626 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#262626',GradientType=0 ); }
.header nav ul li a i.new{background:url(../images/icon.png) no-repeat left top; width:22px; margin-top:8px; display:inline-block; height:22px; }
.header nav ul li a i.export{background:url(../images/icon.png) no-repeat left -28px; width:30px; display:inline-block; height:30px;}
.header nav ul li a i.import{background:url(../images/icon.png) no-repeat left -60px; width:30px; display:inline-block; height:33px;}