css - 在 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 可以确定是否显示“更多选项”按钮。我的问题是，当显示“更多选项”按钮时，列表分隔符区域的高度超出了正常大小。有没有办法可以使用 CSS 使列表分隔符区域保持标准高度？或者，我可以缩小按钮的大小吗？

谢谢!

Answer 1

隔离列表分隔符的 CSS 类(我认为是 .ui-li-divider)并添加 max-height 属性。它应该是这样的:

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