javascript - jQuery 移动 : Spacing the widgets in a page

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>

希望这有帮助。

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