对齐 Jquery 移动标题标题 [英] Aligning the Jquery mobile header title

问题描述

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

<div class="ui-grid-x"><h1 class="ui-link">添加新记录</h1><div data-type="horizo​​ntal" 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">取消</a><a href="www.google.com" class="ui-btn-up-x" data-role="button" data-icon="" data-ajax="false">提交</a>

</div><!--/header -->

现在这成功地将标题移到左边，但文本不保持相同的格式.它变得巨大并且间距都是错误的.有没有人在对齐标题方面取得了任何成功?提前致谢.

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

解决方案

看一下标题中的内容排列方式，它们使用绝对定位按钮和文本对齐标题.您可以通过以下方式将文本向左对齐并更改左按钮的位置(当然您应该通过正确设置 class 而不是 style 属性来实现此目的):

Just wondering if anyone knew how to override the default behavior in Jquery mobile to align the Header title to the left and keep the same format. I can't seem to get it to line up. Here's what I have:

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

now this successfully moves the header over to the left, but the text doesn't keep the same format. It grows huge and the spacing is all wrong. Has anyone had any success left aligning the header? Thanks in advance.

Sorry if this is a noob question. I am just now shifting over to the web from native mobile applications...

解决方案

Looking at the way things are disposed in the header, they use absolute positioning for the buttons and text-align for the title. You can align the text to the left and change the position of the left button the following way (of course you should achieve this by setting class instead of style attributes properly):

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

这篇关于对齐 Jquery 移动标题标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！