10

私は JQuery Mobile を使用ui-grid-aしており、以下のコードに示すように 2 つの要素の幅を設定しようとしています。結果は、幅が に等しい 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>
4

2 に答える 2

25

各グリッド列の幅をオーバーライドできます。

<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>
于 2013-05-02T09:15:22.147 に答える
7

作業例: http://jsfiddle.net/Gajotres/eFWRQ/

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>
于 2013-05-02T09:15:34.427 に答える