javascript - jQuery Mobile：在页面中间隔小部件

Question

我正在使用分组按钮小部件和列表视图小部件。我的代码是

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

希望这可以帮助。

让我知道这些解决方案是否适合您。