1

次のコードを試しました。

<div>
    <div>
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div>${comment.value}</div>
</div>

そしてそれは私に次の結果を与えます：

私が持っているレイアウト

私は以下を作りたいです：

欲しいレイアウト

「ui-block-a」、「ui-block-b」クラスを使用しようとしましたが、成功しませんでした。

4

5 に答える 5

2

これが実際の例です：http：//jsfiddle.net/Gajotres/kLfxg/

jQueryMobile用に構築されたfluid960グリッドを使用します。

HTML：

        <fieldset class="container_12">
            <div class="grid_1"><a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a></div>
            <div class="grid_11">This is some button text</div>     
        </fieldset>
        <fieldset class="container_12">
            <div class="grid_1"><a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a></div>
            <div class="grid_11">This is some button text</div>     
        </fieldset>

CSS：

.grid_11 {
    line-height: 35px;
}

また、これは柔軟なグリッド（jQMの元のグリッドのように）であるため、この線はその幅を固定します。

.container_12 .grid_1 {
    width: 40px !important;
}
于 2013-02-20T15:33:29.423 に答える
1

理論的には、以下のコードがそれを行うはずです。

<div>
    <div style="float:left;">
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div>${comment.value}</div>
</div>

インラインcssの代わりにcssクラスを使用することをお勧めしますが、スタイルタグはヘッダーに配置する必要があります。

<style>
    .left {float:left;}
</style>
<div>
    <div class="left">
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div>${comment.value}</div>
</div>
于 2013-02-20T15:30:29.113 に答える
1

グリッドレイアウトはui-gridクラスでラップする必要があります。

<div class="ui-grid-a">
 <div class="ui-block-a">
   <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true">
   </a>
 </div>
 <div class="ui-block-b">Test Comment</div>
 <div class="ui-block-a">
  <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true">
  </a>
 </div>
</div>

JSfiddle：テスト

于 2013-02-20T15:36:36.670 に答える
0

jquerymobileでそれを行う方法。質問で述べたように、「ui-block-a」クラスを使用してみましたが、間違った方法で使用しました。ネストされたブロックと外側のブロックの両方に指定する必要があります。次のコードは、目的の動作を生成します。

<div class="ui-block-a">
    <div class="ui-block-a">
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
    <div class="ui-block-a">${comment.value}</div>
</div>

cssだけを使用した回答も参照してください

于 2013-02-21T12:10:57.357 に答える
-1

テキストは、コードの下ではなく、コード内のボタンの横に配置する必要があります。

<div>
    <div>
        <a href="#" data-role="button" data-icon="plus" data-iconpos="notext" data-mini="true"></a> <span>${comment.value}</span>
        <a href="#" data-role="button" data-icon="minus" data-iconpos="notext" data-mini="true"></a>
    </div>
</div>

CSSを表示していないので、そこで何かを変更する必要があるかどうかはわかりませんが、このコードを使用すると、ボタンの横に表示できるようにテキストが適切な場所に配置されます。

于 2013-02-20T15:28:00.940 に答える