对齐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移动标题标题

回答

相关问题