1

jQuery Mobile の水平にグループ化されたラジオ ボタン セットの相対的な幅をカスタマイズしようとしています。

デフォルトでは、これらの相対的な寸法はおおよそです (目視のみ)。

  • .ui-controlgroup-label 25%
  • .ui-controlgroup-controls 75%

次の html で、この分割を 50:50 に変更しようとしました...

<div data-role="content">            

  <div data-role="fieldcontain">

    <fieldset data-role="controlgroup" data-type="horizontal" id="ps_test">

      <legend>
        Quite a bit of of text to put here from time to time ...
      </legend>

      <input type="radio" name="radio-choice-2" id="radio-choice-21" value="choice-1" checked="checked" />
      <label for="radio-choice-21">0</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-22" value="choice-2"  />
      <label for="radio-choice-22">1</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-23" value="choice-3"  />
      <label for="radio-choice-23">2</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-24" value="choice-4"  />
      <label for="radio-choice-24">3</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-25" value="choice-4"  />
      <label for="radio-choice-25">4</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-26" value="choice-4"  />
      <label for="radio-choice-26">5</label>

      <input type="radio" name="radio-choice-2" id="radio-choice-27" value="choice-4"  />
      <label for="radio-choice-27">6</label>

    </fieldset>
  </div>

</div><!-- /content -->

… 次の css を使用して ...

.ui-controlgroup-label {
    width: 50%;
}

.ui-controlgroup-controls {
    width: 50%;
}

…しかし、これは影響しません。ここで表示するコードの例を保存しました

ラベルとボタン セットの幅を変更するにはどうすればよいですか?

どうもありがとう。

4

1 に答える 1

1

あなたの CSS は、jQuery Mobile の CSS ほど優先度が高くありません。次のように変更すれば問題ありません。

.ui-field-contain .ui-controlgroup-label {
    width: 50%;
}

.ui-field-contain .ui-controlgroup-controls {
    width: 50%;
}

次回は、FireBug、Chrome 開発者ツール、Dragonfly、または IE 開発者ツールを使用してください。

于 2012-10-31T08:17:00.513 に答える