我正在使用网格来执行此操作,以及一个额外的 css 规则:
.ui-controlgroup-horizontal > div > .ui-btn {
width: 99%
}
我这样做的原因是这样的标记:
<div class="ui-grid-a" data-role="controlgroup" data-type="horizontal">
<div class="ui-block-a">
<button type="submit" data-theme="c">Cancel</button>
</div>
<!-- etc -->
</div>
由 jquery 转换成这样的标记(在 Chrome 或 Firebug 中检查):
<div class="ui-grid-a ui-corner-all
ui-controlgroup ui-controlgroup-horizontal"
data-role="controlgroup" data-type="horizontal">
<div class="ui-block-a">
<div data-corners="true" data-shadow="true"
data-iconshadow="true" data-inline="null"
data-wrapperels="span" data-icon="null" data-iconpos="null"
data-theme="c" data-mini="false"
class="ui-btn ui-btn-up-c ui-corner-left"
aria-disabled="false">
<span class="ui-btn-inner ui-corner-left">
<span class="ui-btn-text">Cancel</span>
</span>
<button type="submit" data-theme="c" class="ui-btn-hidden" aria-disabled="false">Cancel</button>
</div>
</div>
<!-- etc -->
</div>
如您所见,.ui-btn
我们想要 100% 的宽度在内部ui-block-a
(或ui-block-b
,ui-block-c
等),而我们的水平控制组已经获得了 class .ui-controlgroup-horizontal
,因此规则:.ui-btn
children of divs
children的 children.ui-controlgroup-horizontal
是(几乎)100%。我没有达到 100%,因为这为我切断了右侧按钮上的圆角。通过.ui-controlgroup-horizontal
在顶级类上使用,而不是(比如说)ui-grid-a
,这条规则适用于不同的网格大小。