Jquery mobile 为什么我的css按钮垂直使用；数据角色：争用“；在jqm中？

我在我的演示中使用了jQm。它看起来像这样。具有良好的UI。“新建、导出和导入按钮是水平的”。当你滚动时，请检查。

唯一的问题是我的面板坏了

但是当我使用jqm div（数据角色：header，content，fotter）时，我的css打破了“新建”，导出和导入按钮是垂直的。为什么？但是我的面板问题解决了。

测试套件


堆垛机








高级^
测试套件配置
顺序的
平行的
添加测试用例

您需要修复以下CSS文件：

导航栏CSS设置为：

header nav {

因为您不再有CSS，所以需要更改CSS。在我的上一个示例中，我将其替换为data role=“header”div。现在您需要更改CSS，以便它可以查看这个新的div容器

工作示例： HTML:

---

@答得很好谢谢你的帮助没问题，我很乐意帮忙：）

header nav {

<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;}