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％

回答

相关问题