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

时间:2012-04-12 12:05:22

标签: css jquery-mobile

我正在使用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来保持列表分隔区域的标准高度?或者,我可以缩小按钮大小吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

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

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