Css JQuery Mobile将2个元素的宽度设置为80%和20%
我正在使用JQuery Mobile,并试图使用Css JQuery Mobile将2个元素的宽度设置为80%和20%,css,jquery-mobile,Css,Jquery Mobile,我正在使用JQuery Mobile,并试图使用ui-grid-a设置两个元素的宽度,如下面的代码所示。结果是两个元素的宽度等于50:50%。我希望我的输入文本宽度为80%,我的按钮在同一行中为20%。你怎么能做到这一点 <div data-role="footer" data-theme="a" class="ui-grid-a" data-position="fixed"> <div class="ui-block-a" > <inpu
ui-grid-a
设置两个元素的宽度,如下面的代码所示。结果是两个元素的宽度等于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>
工作示例:
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>