Question

只是想知道是否有人知道如何覆盖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 -->

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

很抱歉，如果这是一个菜鸟问题。我现在正在从原生移动应用程序转移到Web ...

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

Answer 2

您唯一要做的就是将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-tag的div会禁用jQuery。为了给文本留一些余地，因为一直到左边所有你需要做的就是添加CSS，看起来应该是这样......

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

这会在左边给你一些左边距。

对齐Jquery移动标题标题

2 个答案: