html - 当显示页面出现在 ListView 中时，后退按钮被隐藏

Question

我有以下 jQuery 移动代码

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

问题是代码工作正常，因为您看到它首先呈现一个实际上是缩略图 View 的列表，当我单击缩略图时，显示按钮会显示其他信息。但是，问题是自动添加的后退按钮包含内容，我无法增加自动生成以下代码的后退按钮 div 的大小。

<div class="ui-bar-b ui-header" data-theme="b" data-role="header" role="banner">
它的高度是 22，如果我用 firebug 增加它，它会增加，但是当我尝试应用 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 指的是每个伪页面中的标题元素。