Question

我正在尝试自定义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%;
}

......但这没有任何影响。我保存了一个代码示例来查看here

如何更改标签和按钮组的宽度？

非常感谢。

Answer 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开发人员工具。

更改jQuery Mobile水平分组单选按钮设置宽度：图例与输入分割

1 个答案: