2

grouped-buttons-widget と listview-widget を使用しています。私のコードは

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

問題は、ウィジェットが間隔を空けずに隣同士に表示されるようになったことです。

ここに画像の説明を入力

これらの (およびおそらく他の) ウィジェット間に必要なスペースを確保するにはどうすればよいですか?

4

1 に答える 1

4

<br>2つのコンポーネントを分離するために単純なものを追加しようとするかもしれないと思います:

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

お役に立てれば。

これらの解決策がうまくいくかどうか教えてください。

于 2012-09-19T23:17:39.923 に答える