我在尝试弄清楚如何在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/
提前致谢!
答案 0 :(得分:1)
要解决您的问题,请使用此css:
#test_1 {
width: 70% !important;
}
因为fieldset已经定义了宽度,我们需要用我们的值覆盖它,并且可以使用!important 来完成。
使用jsFiddle示例:http://jsfiddle.net/Gajotres/SuqRY/
如果您想自己学习如何进行此类更改,请查看 article ,它将教您如何自行完成此操作。
答案 1 :(得分:0)
这样做的一种方法是覆盖按钮大小的默认css样式并添加到您自己的CSS类
.ui-mini .ui-btn-inner {
// resize code
}