Question

这样的可折叠内容

因为摘要在左侧对齐。我需要将摘要与中心对齐。

怎么做？

Answer 1

尝试这样的事情：

.ui-collapsible-heading a {text-align:center;}

Answer 2

您是指摘要中的内容还是标题本身？

如果它的内容如下css似乎可以解决问题。虽然没有经过充分测试。

将此添加到jsFiddle中的CSS部分（将只更新summaryid标题）

#summaryid .ui-btn-text { text-align:center;margin:0px auto; display:inline-block; }

对于所有可折叠标题的全局更新，请使用

.ui-collapsible-heading .ui-btn-text {text-align：center;保证金：0px auto;显示：内联块; }

jQuery Mobile将标头转换为以下HTML输出

 <h2 id="summaryid" class="ui-collapsible-heading ui-collapsible-heading-collapsed">
<a href="#" class="ui-collapsible-heading-toggle ui-btn ui-btn-up-c ui-fullsize ui-btn-icon-right ui-corner-top ui-corner-bottom ui-btn-up-null" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="plus" data-iconpos="right" data-theme="null" data-mini="false">
    <span class="ui-btn-inner ui-corner-top ui-corner-bottom">
        <span class="ui-btn-text">
            <span>
                Summary
            </span>
            <span class="ui-collapsible-heading-status"> 
                click to expand contents
            </span>
        </span>
        <span class="ui-icon ui-icon-plus ui-icon-shadow">&nbsp;</span>
    </span>
</a>

因此，沿着DOM走下去，我们可以找到id'commonid'，然后是'ui-btn-text'类的子节点，这是带有summary的单词。您需要做的是将跨度设置为显示在中心。要使用边距执行此操作：0px auto和display：inline-block。

现在我还没有用较小的分辨率或长标题来测试它，但这应该可以帮助你开始。

干杯，

尼科

需要将可折叠项目的标题放在Jquery Mobile 1.1.0的中心位置

2 个答案: