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

查看:122
本文介绍了对齐Jquery移动标题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

只是想知道如果有人知道如何覆盖默认行为在Jquery移动对齐标题头部左侧和保持相同的格式。我似乎不能让它排队。这里是我有:

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.

对不起,如果这是一个noob问题。我现在只是从本机移动应用程序切换到Web ...

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

推荐答案

标题,他们使用绝对定位的按钮和文本对齐的标题。
您可以按照下面的方式将文本对齐到左边并改变左键的位置(当然,您应该通过设置 class 而不是 style 属性):

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

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆