CSS JQuery Mobile 将 2 个元素的宽度设置为 80% 和 20%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16334269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile set width of 2 elements to 80% and 20%
提问by Jongz Puangput
I am using JQuery Mobile and am trying to set the width of two elements using ui-grid-aas shown in the code below. The result is 2 elements whose width is equal to 50:50%. I would like my input text width to be 80%and my button to be 20%in same line. How can do this?
我正在使用 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>
回答by Raji
You can override each grid column width.
您可以覆盖每个网格列的宽度。
<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>
回答by Gajotres
Working example: http://jsfiddle.net/Gajotres/eFWRQ/
工作示例：http: //jsfiddle.net/Gajotres/eFWRQ/
CSS :
CSS :
#custom-footer .ui-block-a {
width: 80% !important;
}
#custom-footer .ui-block-b {
width: 20% !important;
}
HTML :
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>
