JQuery Mobile 标题对齐变得困惑

Question

使用 JQueryM，我正在尝试开发一个应该看起来像这样的 header

<小时/>

|[菜单图标]门票(左对齐)----------------[搜索图标][加号图标]

<小时/>

我的标记是这样的

       <div data-role="header" data-position="fixed">
            <a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
            <h1 align="left">tickets</h1>

            <a href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="flat-search" data-iconpos="notext" data-inline="true"></a>                         
            <a href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="flat-plus" data-iconpos="notext" data-inline="true"></a> 
        </div>

这显然不会产生所需的结果。我尝试了很多方法包括 Aligning the Jquery mobile header title

和

.ui-title {
        margin     : 0.6em 1em  50px !important;
        text-align : left !important;}

但现在我已经到了一个我似乎迷失的地方。有人可以看一下这个吗？

Answer 1

好了，HTML:

<div data-role="header" data-position="fixed">
    <a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
    <h1 class="ui-btn-left spacerleft" >tickets</h1>

    <a class="ui-btn-right spacerright" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>                         
    <a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a> 
</div>

CSS:

.spacerleft
{
    margin-left: 50px !important;
}
.spacerright
{
    margin-right: 50px !important;
}

<强> JSFiddle