1

jQuery Mobile 1.3.0 でコントロール グループのサイズを変更する方法を見つけようとして問題が発生しています。

正しいアプローチがわかりません。現在、次のように .ui-btn クラスのサイズを変更しています。

#test_1 .ui-btn {
    width: 200%;
}

しかし、期待どおりにボタンのサイズを変更していません。右のボタンを大きくすると左のボタンと重なってしまうか、小さくしても再配置されません。

これは私の HTML です。これは 5 つのブロックを持つコントロール グループで、そのうち 4 つが列で、1 つが中央のソロ グループです。

<fieldset class="ui-grid-a" data-role="controlgroup" data-mini="true" id="test_1">
        <div class="ui-block-a">
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
        </div>
        <div class="ui-block-b">
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
        </div>
        <div class="ui-grid-solo">
            <label>AaaaaaaaaaaAaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
        </div>
        <div class="ui-block-a">
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
        </div>
        <div class="ui-block-b">
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
            <label>Aaaaaaaaaaa
                <input type="radio" name="accion" value="1">
            </label>
        </div>
    </fieldset>

私が設定した jsFiddle のすべてのコード: http://jsfiddle.net/4zMqn/1/

前もって感謝します！

4

2 に答える 2

1

解決

問題を解決するには、次の css を使用します。

#test_1  { 
    width: 70% !important; 
}

フィールドセットにはすでに幅が定義されているため、値でオーバーライドする必要があります。これは!importantで実行できます。

動作中の jsFiddle の例: http://jsfiddle.net/Gajotres/SuqRY/

より詳しい情報

この種の変更を自分で行う方法を学びたい場合は、この記事を確認してください。自分でこれを行う方法が説明されています。

于 2013-04-16T08:48:09.000 に答える
0

これを行う 1 つの方法は、ボタン サイズのデフォルトの css スタイルをオーバーライドし、独自の CSS クラスに追加することです。

.ui-mini .ui-btn-inner {
   // resize code
 }
于 2013-04-15T12:28:15.390 に答える