Wyrównanie tytułu nagłówka mobilnego Jquery

Question

Zastanawiasz się, czy ktoś nie wiedział, jak zmienić domyślne zachowanie w Jquery mobile, aby wyrównać tytuł nagłówka do lewej i zachować ten sam format. Nie mogę tego ustawić. Oto, co mam:

<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 --> 

teraz to pomyślnie przesuwa nagłówek w lewo, ale tekst nie zachowuje tego samego formatu. Rośnie ogromnie, a odstępy są zepsute. Czy ktokolwiek osiągnął sukces, wyrównując nagłówek? Z góry dziękuję.

Przepraszam, jeśli to jest pytanie typu noob. Właśnie przechodzę do sieci z natywnych aplikacji mobilnych ...

Answer 1

Patrząc na sposób, w jaki rzeczy są ułożone w nagłówku, używają bezwzględnego pozycjonowania dla przycisków i wyrównania tekstu dla tytułu. można wyrównać tekst do lewej i zmienić położenie lewego przycisku w następujący sposób (oczywiście należy to osiągnąć poprzez ustawienie class zamiast style prawidłowo atrybuty):

<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

Jedyną rzeczą, którą musisz Zrób to, aby opakować swój znacznik h1 w znacznik div, który nie jest div data-role = "header". Kod powinien wyglądać następująco ...

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

Nie trzeba wyrównać tekst, ponieważ div, który jest owijanie tag H1 wyłącza jQuery. Aby dać pewien margines do tekstu, ponieważ będzie całą drogę w lewo, wszystko co musisz zrobić, to dodać CSS i powinien wyglądać tak ...

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

To daje pewne lewy margines w lewo .