当显示页面在列表视图中出现时，后退按钮被隐藏

Question

我有以下jQuery移动代码

<ul data-role="listview" data-dividertheme="b">
<g:each in="${categoryList}" var="category">
<li> <img src="../images/${category.imageName}"/>
<h3 class="ul-li-heading">${category.name}</h3>
<ul>
<g:if test="${category.userCategories}">
<g:each in="${category.userCategories}" var="ads">
<li>
Category: ${ads.category}
</li>
<li>
User: ${ads.user?.name}
</li>
<li>
Option: ${ads.optionName}
</li>
<li> Description: ${ads.description}
</li>
<hr/> </g:each>
</g:if>
<g:else>
<br/><br/><br/><br/>
<li> No User Category Description Added To Show </li>
</g:else>
</ul>
</li>
</g:each>
<div class="paginateButtons">
<g:paginate total="${categoryInstanceTotal}"/> </div> </ul>

问题是代码工作正常，因为你看到它首先渲染一个实际上是缩略图视图的列表，当我点击缩略图时，show按钮会显示其他信息。但是，问题是后退按钮被添加自动包装内容，我无法增加后退按钮div的大小，后面的代码自动生成。

<div class="ui-bar-b ui-header" data-theme="b" data-role="header" role="banner">
它的高度是22，如果我用萤火虫增加它，它会增加，但当我尝试应用css时，它不起作用。
 有人可以帮忙吗？

Answer 1

您可以将!important添加到CSS声明中，也可以创建比jQuery Mobile规则更具体的规则（它们可以实现这些规则）：

.ui-mobile .ui-page .ui-header {
    height : 100px;
}
.ui-mobile .ui-page .ui-header a {
    height : 90px;
}​

演示：http://jsfiddle.net/cAr7w/

.ui-mobile引用jQuery Mobile初始化后的HTML元素，.ui-page引用伪页面元素，.ui-header引用每个伪页面中的头元素。