jQuery Mobile：在页面中展开小部件

Question

我正在使用分组按钮小部件和listview小部件。我的代码是

<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-controls" align="center">
        <!-- ........ -->        
    </div>        
</div>

<ul data-role="listview" id="mylist">
    <li data-role="list-divider" role="heading" data-theme="b">
        Sheet: Untitled1
    </li>
    <!-- ........ -->
    <li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
        Total:
    </li>
</ul>

问题是现在小部件彼此相邻，两者之间没有任何间距。

我应该怎样做才能确保这些（可能还有其他）小部件之间的空间？

Answer 1

我认为您可以尝试添加一个简单的<br>来分隔两个组件：

<div data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-controls" align="center">
        <!-- ........ -->        
    </div>        
</div>

<br>

<ul data-role="listview" id="mylist">
    <li data-role="list-divider" role="heading" data-theme="b">
        Sheet: Untitled1
    </li>
    <!-- ........ -->
    <li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
        Total:
    </li>
</ul>

或者您可以尝试使用margin-bottom，例如，尝试以下操作：

<div style="margin-bottom: 5px;" data-role="controlgroup" data-type="horizontal" class="ui-corner-all ui-controlgroup ui-controlgroup-horizontal">
    <div class="ui-controlgroup-controls" align="center">
        <!-- ........ -->        
    </div>        
</div>

<ul data-role="listview" id="mylist">
    <li data-role="list-divider" role="heading" data-theme="b">
        Sheet: Untitled1
    </li>
    <!-- ........ -->
    <li id="mylistSummary" data-role="list-divider" role="heading" data-theme="b">
        Total:
    </li>
</ul>

希望这有帮助。

请告诉我这些解决方案是否适合您。