使用JQuery Mobile中列表分隔符中的按钮

Question

我正在使用JQuery Mobile。我有一个如下所示的页面：

<div id="myPage" data-role="page">
    <div data-role="header">
        <h1>My App</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview"> 
            <li data-role="list-divider">
                <div data-type='horizontal'>Hello&nbsp;
                <a href='#' id='moreOptions' data-role='button' data-icon='arrow-d' data-inline="true" data-mini="true" data-iconpos='notext'>more</a>
            </div></li>            
        </ul><br /><br />

        My App Content
    </div>
</div>

我有一些JavaScript决定是否显示“moreOptions”按钮。我的问题是，当显示“moreOptions”按钮时，list-divider区域的高度扩展超出正常大小。有没有办法可以使用CSS来保持列表分隔区域的标准高度？或者，我可以缩小按钮大小吗？

谢谢！

Answer 1

隔离列表分隔符的CSS类（我认为是.ul-li-divider）并添加max-height属性。它应该是这样的：

.ui-li-divider{
max-height: 20px;
}