jQuery移动列表视图和输入按钮重叠

dev*_*per 7 jquery-mobile

我有以下内容显示项目列表和列表下方的按钮.但是按钮在列表顶部重叠.我一定不要在其上放置某种数据角色或其他属性.

<div data-role="content" data-theme="b">    
    <div>
       <ul id="listOfSheets" data-role="listview" >
     <li class="hidden"> <a href="_linkToSheet" data-ajax="false"> _sheetName</a></li>
      </ul>
    </div>  
    <input id="logout" type="button" value="Sign Out"    />
 </div><!-- /content -->
Run Code Online (Sandbox Code Playgroud)

这是它的样子:

在此输入图像描述

Phi*_*ord 7

实例:

您缺少listview的其中一个属性

data-inset="true"
Run Code Online (Sandbox Code Playgroud)

HTML

<div data-role="content" data-theme="b">    
    <div>
        <ul id="listOfSheets" data-role="listview" data-inset="true">
            <li class="hidden"><a href="#" data-ajax="false">Link 1</a></li>
            <li class="hidden"><a href="#" data-ajax="false">Link 2</a></li>
            <li class="hidden"><a href="#" data-ajax="false">Link 3</a></li>
        </ul>
    </div>  
    <input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
Run Code Online (Sandbox Code Playgroud)

  • 但这会改变列表的样式:在所有方面添加边框和边距. (9认同)