1

テキスト入力とボタンを並べてフッターに追加しようとしています。これは正常に機能しますが、幅を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>
4

2 に答える 2

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/

于 2012-07-27T12:06:01.270 に答える
0 
<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 ); 
}
于 2012-07-27T12:24:01.850 に答える