在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”按钮时列表分隔区的高度扩大超出正常大小。有没有一种方法可以使用CSS来保持列表分区的标准高度？或者，我可以让一些家庭缩小按钮尺寸吗？

谢谢！

Answer 1

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

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