estoy usando una cuadrícula para hacer esto, y una regla CSS extra:
.ui-controlgroup-horizontal > div > .ui-btn {
width: 99%
}
La razón Estoy haciendo esto es que el marcado de esta manera:
<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>
Es transformado por jquery en m arkup como esto (inspeccionarlo en 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>
Como se puede ver, el .ui-btn
queremos ser 100% ancha es el interior ui-block-a
(o ui-block-b
, ui-block-c
, etc.), y nuestro control horizontal grupo ha ganado la clase .ui-controlgroup-horizontal
, de ahí la regla: .ui-btn
hijos de divs
hijos de .ui-controlgroup-horizontal
están hechos (casi) 100%. Me detengo a menos del 100% porque esto corta las esquinas redondeadas en el botón de la derecha para mí. Al usar .ui-controlgroup-horizontal
en la clase superior y no (por ejemplo) ui-grid-a
, esta regla funciona para diferentes tamaños de cuadrícula.
gracias, es un trabajo – RogerWu
encantados de ser de ayuda. ¿podría marcar la respuesta como aceptada? –
No es muy elegante, funciona con pantallas anchas, pero no tiene un píxel perfecto. –