jquery - Jquery Mobile- 页脚元素，100% 宽度

Question

我正在尝试将文本输入和按钮并排添加到页脚中，效果很好，但我需要它的宽度为 100%，即流体布局。非常感谢任何帮助。

<form method="post" action="send.php">
       <div style="float:left;">
          <input style="" data-mini="true" type="text" name="message" id="message" value="" data-theme="a"/>
       </div>

        <div style="float:left;">
       <input type="submit" id="submit" value="Send Message" data-mini="true" data-theme="a"/>
        </div>
</form>

Answer 1

只需将表单元素包含在网格中即可自动拉伸输入，如下所示：

向输入提供我自己的内联宽度，以按照我想要的方式拉伸它们。您还可以创建自己的课程并将其与.ui-block-*课程结合使用。

<form method="post" action="send.php" class="ui-grid-a">
    <div style="width:80%;" class="ui-block-a"><input style="" data-mini="true" type="text" name="message" id="message" value="" data-theme="a"/></div>
    <div style="width:20%;" class="ui-block-b"><input type="submit" id="submit" value="Send Message" data-mini="true" data-theme="a"/></div>       
</form>

演示：http: //jsfiddle.net/tKcMg/1/

Answer 2

<div id="resize">
    <input id="text" type="text" style="float:left;"/>
    <input id="submit" type="submit" value="submit" style="float:left;" />
</div>

$(function() { 
    resize_input();

    $(window).resize(function(){
        resize_input();
    })
});
function resize_input(){
    var foo = $('div#resize').outerWidth();
    var bar = $('input#submit').outerWidth();
    $('input#text').outerWidth( foo - bar ); 
}