1

我在试图弄清楚如何在 jQuery Mobile 1.3.0 中调整控制组的大小时遇到​​问题

我不知道正确的方法，现在我正在调整 .ui-btn 类的大小，如下所示：

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

但它并没有像我预期的那样调整按钮的大小，如果我把它们放大，右边的按钮会与左边的按钮重叠，或者当我把它们缩小时它们不会重新定位。

这是我的 HTML，它是一个包含 5 个块的控制组，其中 4 个是列，一个是中间的 Solo 组：

<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; 
}

因为 fieldset 已经定义了宽度，我们需要用我们的值覆盖它，并且可以使用!important来完成。

工作 jsFiddle 示例：http: //jsfiddle.net/Gajotres/SuqRY/

更多信息

如果您想自己学习如何进行这种更改，您应该查看这篇文章，它将教您如何自己进行。

于 2013-04-16T08:48:09.000 回答
0

一种方法是覆盖按钮大小的默认 css-style 并添加到您自己的 CSS 类

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