jQuery Mobile 小さいボタンを左右に配置したいとき

ヘッダではなく、 role=main 内の左右に小さいボタンを配置したい場合、

role=mainの先頭ならば、次でできる

    <div style="height:35px;">
        <a href="./kino21.html" target="_top" rel="external" class="ui-btn ui-btn-left  ui-icon-home ui-btn-icon-left">kino21.html 1</a>
        <a href="./kino21.html" target="_top" rel="external" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">kino21.html 4</a>
    </div>

 しかし、ui-btn-left, ui-btn-right は、postion:absolute   margin:0.4くらいが設定されておりあくまで、ヘッダ/フッダ内のものである。

行の途中で、設定する場面もあるならば、以下のようにすると、見栄えが整う

 

<div style="height:35px;position: relative; ">
    <a href="./kino21.html" target="_top" rel="external" 
        class="ui-btn ui-btn-left  ui-icon-home ui-btn-icon-left" 
        style="left:0em;margin-left:0em">kino21.html 1</a>
    <a href="./kino21.html" target="_top" rel="external" 
        class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left" 
        style="right:0em;margin-right:0em">kino21.html 4</a>
</div>



f:id:nabe_shodai:20170727225459p:plain