更改jQuery移动水平分组单选按钮集宽度:图例与输入拆分

Question

我正在尝试自定义jQuery移动的水平分组单选按钮集的相对宽度。

默认情况下，它们的相对尺寸大致为(仅凭眼睛)。

• ..ui控制组-标签25%
• ..ui控制组-控制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%;
}

…但这没有影响。我保存了一个查看这里的代码示例

你如何改变标签和按钮的宽度？

非常感谢。

Answer 1

您的CSS没有jQuery移动中的CSS优先级高。如果你把它改为这样的话，它应该是好的：

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

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

下次只需使用FireBug、工具、蜻蜓或IE开发工具即可。