jquery-mobile - 带有居中按钮的可折叠页脚菜单

Question

我正在尝试在 JQuery Mobile 1.3 中创建一个可折叠的底部菜单。我只想在底部有一个带有向上箭头的水平页脚。单击页脚时，菜单会展开并且箭头指向下方。这几乎是我想要的：

http://jsfiddle.net/6F2XU/

但我似乎根本无法使按钮居中。

<div data-role="footer" data-theme="a" data-content-theme="a" data-inset="false"   data-type="horizontal"  data-iconpos="notext" data-position="fixed" class="foot">
<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button" >
<h3>Pets</h3>
<ul data-role="listview">
    <li><a href="#">Canary</a></li>
    <li><a href="#">Cat</a></li>
    <li><a href="#">Dog</a></li>
    <li><a href="#">Gerbil</a></li>
    <li><a href="#">Iguana</a></li>
    <li><a href="#">Mouse</a></li>
</ul>
</div>
</div>

Javascript

.foot{
margin:0;
padding:0;
}
.ui-btn { width: 100%; height:30px;}
.center-button{
margin: 0 auto;
padding:0 20px 0 20px;
}

有什么提示吗？

Answer 1

解决方案

这是一个可行的解决方案：http: //jsfiddle.net/Gajotres/HHnzH/

#custom-collapsible h3 a span span.ui-icon {
    margin: 0 auto !important;
    margin-top: 2px !important;
    float: none !important;
}

HTML 变化，从此：

<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button">

到：

<div data-role="collapsible"data-theme="a" data-content-theme="a" data-inset="false"  data-collapsed-icon="arrow-u"  data-expanded-icon="arrow-d" data-iconpos="notext" class="center-button" id="custom-collapsible">

我希望这是你想要的。

更多信息

如果您想自己学习如何进行这种更改，您应该查看这篇文章，它将教您如何自己进行。

Answer 2

将此添加到 .center-button：

position:relative;