Sto utilizzando una griglia per fare questo, e una regola CSS in più:
.ui-controlgroup-horizontal > div > .ui-btn {
width: 99%
}
La ragione Sto facendo questo è che il markup in questo modo:
<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>
Viene trasformato da jquery in m arkup come questo (esaminarlo in Chrome o 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>
Come si può vedere, la .ui-btn
vogliamo essere larga 100% è dentro ui-block-a
(o ui-block-b
, ui-block-c
, ecc), e il nostro controllo orizzontale gruppo ha guadagnato la classe .ui-controlgroup-horizontal
, quindi la regola: .ui-btn
figli di divs
bambini di .ui-controlgroup-horizontal
sono fatti (quasi) al 100%. Mi fermo al 100% perché questo mi riduce gli angoli arrotondati sul pulsante destro. Utilizzando .ui-controlgroup-horizontal
sulla prima classe, e non (per esempio) ui-grid-a
, questa regola funziona con diverse dimensioni della griglia.
ringraziamento, è un lavoro – RogerWu
felice di essere di aiuto. potresti contrassegnare la risposta come accettata? –
Non molto elegante, funziona con schermi larghi ma non pixel perfetti. –