我正在使用
JQuery Mobile,并尝试使用ui-grid-a设置两个元素的宽度,如下面的代码所示.结果是2个元素的宽度等于50:50%.我希望我的输入文本宽度为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>
解决方法
您可以覆盖每个网格列宽.
<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>