0

我有以下 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>

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

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

4

1 回答 1

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指每个伪页面内的header元素。

于 2012-04-22T16:23:08.250 回答