JQuery Mobile將2個元素的寬度設置爲80％和20％

我正在使用JQuery Mobile，並試圖使用ui-grid-a設置兩個元素的寬度，如下面的代碼所示。結果是2個元素的寬度等於50:50%。我希望我的輸入文字寬度爲80%，我的按鈕在同一行中爲20%。如何做到這一點？JQuery Mobile將2個元素的寬度設置爲80％和20％

<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>

來源

2013-05-02 Jongz Puangput

您可以覆蓋每個網格列的寬度。

<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>

來源

2013-05-02 09:15:22 Raji

工作例如：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>

來源

2013-05-02 09:15:34 Gajotres

JQuery Mobile將2個元素的寬度設置爲80％和20％

回答

相關問題