JQuery 2 öğenin mobil ayar genişliği% 80 ve% 20

Question

JQuery Mobile kullanıyorum ve aşağıdaki kodda gösterildiği gibi ui-grid-a kullanarak iki öğenin genişliğini ayarlamaya çalışıyorum. Sonuç, genişliği 50:50%'a eşit olan 2 öğedir. Giriş metni genişliğinin 80% olmasını ve düğmemimin 20% olmasını istiyorum. Bunu nasıl yapabilirim?

<div data-role="footer" data-theme="a" class="ui-grid-a" data-position="fixed"> 
    <div class="ui-block-a" > 
     <input id="outgoingMsg" placeholder="Your Message . . ."> 
    </div> 
    <div class="ui-block-b" > 
     <div style="margin: 10px 0 0 0;"> 
      <a id="callDialog" href="#dialog" type="button" 
       data-theme="b" data-rel="dialog" 
       data-transition="slidedown">Send</a> 
     </div> 
    </div> 
</div> 

Answer 1

Her kılavuz sütun genişliğini geçersiz kılabilirsiniz.

<div class="ui-block-a" style="width:80%"><input id="outgoingMsg" placeholder="Your Message . . ."></div> 
<div class="ui-block-b" style="width:20%" > 
    <div style="margin: 10px 0 0 0;"> 
     <a id="callDialog" href="#dialog" type="button" data-theme="b" data-rel="dialog" data-transition="slidedown">Send</a> 
    </div> 
</div> 

Answer 2

Çalışma örneği: http://jsfiddle.net/Gajotres/eFWRQ/

CSS:

#custom-footer .ui-block-a { 
    width: 80% !important; 
} 

#custom-footer .ui-block-b { 
    width: 20% !important;  
} 

HTML:

<div data-role="footer" data-theme="a" class="ui-grid-a" id="custom-footer" data-position="fixed"> 
    <div class="ui-block-a" ><input id="outgoingMsg" placeholder="Your Message . . ."></div> 
    <div class="ui-block-b" > 
     <div style="margin: 10px 0 0 0;"> 
      <a id="callDialog" href="#dialog" type="button" data-theme="b" data-rel="dialog" data-transition="slidedown">Send</a> 
     </div> 
    </div> 
</div>