Jqueryモバイルヘッダータイトルの整列

Question

Jqueryモバイルでのデフォルトの動作をオーバーライドして、ヘッダータイトルを左に揃えて同じフォーマットを維持する方法を知っていた人はいないでしょうか。私はそれを整列させるように見えることはできません。ここでは、私が持っているものです。

<div class="ui-body-x" data-role="header" data-position="fixed"> 
    <div class="ui-grid-x"> 
    <h1 class="ui-link">Add New Record</h1> 
    <div data-type="horizontal" style="top:5px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right"> 
     <a href="www.google.com" data-role="link" data-icon="settings" data-ajax="false">Cancel</a> 
     <a href="www.google.com" class="ui-btn-up-x" data-role="button" data-icon="" data-ajax="false">Submit</a> 
    </div> 
    </div>          
</div><!-- /header --> 

は今、これは成功し、左側に上ヘッダを移動しますが、テキストは同じフォーマットを保持しません。それは巨大になり、間隔はすべて間違っています。誰かがヘッダを整列させて何らかの成功を収めましたか？前もって感謝します。

申し訳ありませんが、これは問題の場合です。私は今、ネイティブのモバイルアプリケーションからWebに移行しています...

Answer 1

ヘッダーに配置されている方法を見ると、ボタンの絶対配置とタイトルのテキスト整列が使用されます。

<div data-role="header" data-position="fixed" > 
    <h1 style="text-align:left; margin-left:10px;">Page title</h1> 
    <a href="www.google.com" data-icon="delete" style="left:auto; right:120px;">Cancel</a> 
    <a href="www.google.com" data-icon="check" data-theme="b">Submit</a> 
</div><!-- /header --> 

Answer 2

あなたが持っている唯一のもの：（あなたが適切class代わりstyleの属性を設定することによって、これを達成する必要があり、もちろん） あなたは左側にテキストを揃えることができ、次のように左のボタンの位置を変更しますdiv-tag = data-role = "header"ではないdivタグにh1タグをラップします。あなたのコードは次のようになります...

<section id="firstpage" data-role="page"> 
    <div data-role="header"> 
     <div> 
     <h1>Grade Calculator</h1> 
     </div> 
    </div><!-- end data-role = header --> 
</section> 

h1タグをラップしているdivがjQueryを無効にするため、テキストを整列する必要はありません。すべての方法になりますので、テキストにいくつかの余裕を与えるためにあなたがしなければならないすべては

[data-role="header"] h1 { 
    margin-left: 10px; 
} 

は左にあなたにいくつかの左マージンを与えること... CSSを追加するとこのようになるはずです左。