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 开发者工具、蜻蜓或 IE 开发者工具。

于 2012-10-31T08:17:00.513 回答