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 指的是每个伪页面中的标题元素。