allinea gli elementi al centro in jquery mobile footer

Question

Sto riscontrando degli errori nell'allineamento degli elementi all'interno del piè di pagina di una jQuery Mobile Page.
Abbiamo tre diverse informazioni da visualizzare: COPYRIGHT, VERSION NUMBER e CONNECTION STATUS. L'obiettivo è allineare il piè di pagina in modo tale che COPYRIGHT sia allineato a sinistra, il NUMERO VERSIONE sia centrato e lo STATO DI CONNESSIONE sia allineato a destra sulla stessa riga del piè di pagina.

Ho provato quanto segue che, purtroppo, non ha funzionato:

<div data-role="footer"> 
<span style="text-align:left">COPYRIGHT</span> 
<span style="text-align:center">VERSION NUMBER</span> 
<span style="text-align:right">CONNECTION STATUS</span> 
</div> 

Eventuali suggerimenti su come realizzare questa configurazione l'allineamento? Mille grazie!

Answer 1

Si dovrebbe usare griglia jQuery Mobile in questo modo:

<div data-theme="a" data-role="footer" data-position="fixed"> 
     <h3> 
      <div class="ui-grid-b"> 
       <div class="ui-block-a" style="text-align: left;">COPYRIGHT</div> 
       <div class="ui-block-b" style="text-align: center;">VERSION NUMBER</div> 
       <div class="ui-block-c" style="text-align: right;">CONNECTION STATUS</div>     
      </div><!-- /grid-a --> 
     </h3>     
    </div> 

Ed ecco un esempio di lavoro: http://jsfiddle.net/Gajotres/e2uaU/

E lo stile è come si desidera. Tutto dovrebbe essere avvolto nel tag h3 in modo che il footer possa mantenere la sua altezza.