JQuery Mobile将2个元素的宽度设置为80％和20％

问题描述

我使用JQuery Mobile，并尝试使用 ui-grid-a 设置两个元素的宽度，如下面的代码所示。结果是2个宽度等于 50:50％的元素。我想我的输入文本宽度为 80％，我的按钮在 20％在同一行。如何做？

I am using JQuery Mobile and am trying to set the width of two elements using ui-grid-a as 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?

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

推荐答案

>

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>

这篇关于JQuery Mobile将2个元素的宽度设置为80％和20％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！