używam siatki, aby to zrobić, i jedna dodatkowa reguła CSS:
.ui-controlgroup-horizontal > div > .ui-btn {
width: 99%
}
Powód Robię to tak, że znaczniki takie jak to:
<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>
Jest przekształcany przez jquery na m arkup tak (sprawdzać go w Chrome lub 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>
Jak widać, .ui-btn
chcemy mieć 100% szerokości jest wewnątrz ui-block-a
(lub ui-block-b
, ui-block-c
, itd.), a nasza kontrola pozioma grupa zyskała klasę .ui-controlgroup-horizontal
, stąd zasada: .ui-btn
dzieci divs
dzieci .ui-controlgroup-horizontal
są wykonane (prawie) 100%. Zatrzymuję się na poziomie 100%, ponieważ powoduje to przesuwanie zaokrąglonych rogów po prawej stronie przycisku. Korzystając z klasy .ui-controlgroup-horizontal
w najwyższej klasie, a nie (powiedzmy) ui-grid-a
, ta zasada działa dla różnych rozmiarów siatki.
dziękuję, to praca – RogerWu
rad być pomocne. czy możesz oznaczyć odpowiedź jako zaakceptowaną? –
Niezbyt elegancki, działa z szerokimi ekranami, ale nie jest idealny w pikselach. –