對齊jquery移動標題標題

想知道是否有人知道如何覆蓋Jquery mobile中的默認行爲以將標題標題對齊到左側並保持相同的格式。我似乎無法讓它排隊。這是我有什麼：對齊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 -->

現在這成功地將標題移到左側，但文本不保持相同的格式。它變得非常龐大，間距都是錯誤的。有沒有人有任何成功的標題對齊？提前致謝。

很抱歉，如果這是一個noob問題。我現在剛剛從原生移動應用程序轉向網絡......

來源

2011-08-31 gabaum10

看看事情在標題中的位置，他們使用按鈕的絕對定位和標題的文本對齊。您可以對齊文本的左側和更改左按鈕的位置下面的方式（當然，你應該通過設置class代替style屬性正確地做到這一點）：

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

來源

2011-09-01 08:45:27 pauloya

訣竅。我不確定爲什麼之前不行。謝謝您的幫助。 – gabaum10

總是很緊張，這樣的變化會對JQM測試設備之一的佈局產生不利影響。雖然看起來很安全，並且運作良好！ –

如果您按照建議將這些樣式放入CSS類中，請在值後面添加'！important'，否則當JQM增強標記時，它們將被覆蓋。例如：'.page-title-left {text-align：left！important; margin-left：10px！important;}' – Ignitor

你要的唯一的事做的是將你的h1-tag包裝在不是div data-role =「header」的div標籤中。您的代碼應該是這樣的......

<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的。給予一定的餘量，以文字，因爲會一路向左所有你需要做的是添加CSS和應該是這樣的......

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

這將使你在左邊一些左旁。

來源

2015-04-07 01:48:07 Gilbert

對齊jquery移動標題標題

回答

相關問題