对齐 Jquery 移动标题标题答案

【问题标题】：Aligning the Jquery mobile header title对齐 Jquery 移动标题标题
【发布时间】：2011-11-07 22:13:30
【问题描述】：

只是想知道是否有人知道如何覆盖 Jquery mobile 中的默认行为以将 Header 标题向左对齐并保持相同的格式。我似乎无法让它排队。这是我所拥有的：

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

现在这成功地将标题移到了左侧，但文本的格式不同。它变大了，间距都错了。有没有人成功对齐标题？提前致谢。

对不起，如果这是一个菜鸟问题。我刚刚从原生移动应用程序转移到网络...

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

查看标题中事物的排列方式，它们对按钮使用绝对定位，对标题使用文本对齐。您可以通过以下方式将文本左对齐并更改左按钮的位置（当然您应该通过正确设置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 -->

【讨论】：

成功了。我不确定为什么以前没有用。感谢您的帮助。
总是担心这样的更改会对 JQM 测试设备之一的布局产生不利影响。不过看起来很安全，而且效果很好！
如果您按照建议将这些样式放入 CSS 类中，请在值后面添加 !important，否则它们将在 JQM 增强标记时被覆盖。示例：.page-title-left { text-align: left !important; margin-left: 10px !important;}

【解决方案2】：

您唯一需要做的就是将您的 h1-tag 包装在一个 div-tag 中，该 div-tag 不是 div data-role="header"。您的代码应如下所示...

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

您不需要进行文本对齐，因为包装 h1-tag 的 div 会禁用 jQuery。为了给文本留出一些边距，因为将一直向左，您所要做的就是添加 CSS，并且应该看起来像这样......

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

这会给你一些左边距。

【讨论】：