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

Question

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

<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 -->

这是它的样子：

Answer 1

直播示例：

• http://jsfiddle.net/B7nhA/（问题）
• http://jsfiddle.net/B7nhA/1/（修复）

您缺少listview的其中一个属性

data-inset="true"

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 -->

Answer 2

我遇到了同样的问题。这是我的修复。

 <style>
 .ui-content .ui-listview
    {
        margin-top: 5px;
        margin-bottom: 5px;
    } 
</style>

JsFiddle Demo

您无需修改​​标记。

Answer 3

如何在按钮之前插入换行符。我认为不是一个干净的解决方案。但它会起作用。

<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> 
    <br>
    <input id="logout" type="button" value="Sign Out"    />
 </div><!-- /content -->

Answer 4

我用填充来解决这类问题。请参阅下文，我将填充添加到list-container div。

<div data-role="content" data-theme="b">    
  <div style="padding-bottom:20px">
    <ul id="listOfSheets" data-role="listview" >
        <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"    />

这是DEMO