如何使用css使我的jquery移动可折叠集更大

Question

我的一些数据有一个可折叠集：

<div data-role="collapsible-set">
     <div data-role="collapsible">
         <h1>
            <span style="font-size: 16px; font-weight: bold; white-space: pre-wrap;" id="title">This is a really long book title</span><br>
            <span style="font-size: 14px; font-weight: normal;" id="author">This is the Author of the book</span>
            <span style="font-size: 14px; font-weight: normal; font-style: italic;" id="year">Yr</span>
         </h1>
         <div>Statis</div>
    </div>
</div>

但是，我无法弄清楚如何更改每个可点击框的高度（标题和作者）。显然jquery mobile使用标题标签来确定在点击之前应该在可折叠集中的内容（我想？）。因此，我无法应用任何CSS。

Fiddle here

Answer 1

每个可点击框的高度取决于应用于padding-top元素的padding-bottom和.ui-btn。您可以通过在样式表中指定以下CSS来增加/减少它：

.ui-btn {
    padding-top: 2.7em;
    padding-bottom: 2.7em;
}

这是 jsFiddle demo 。