JQuery Mobile Header 对齐变得乱七八糟答案

【问题标题】：JQuery Mobile Header alignment going haywireJQuery Mobile Header 对齐变得乱七八糟
【发布时间】：2014-07-03 18:07:29
【问题描述】：

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

|[menu-icon]门票（左对齐）-----------------[search-icon][plus-icon]

我的标记就是这样

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

但现在我到达了一个我似乎迷路的地方。有人可以看看这个吗？

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案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

【讨论】：

【解决方案2】：

试试这个（这是一个快速的答案）：

<div data-role="header" data-position="fixed">
    <div style="float:left"><a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a></div>
    <div style="float:left"><h3>tickets</h3></div>
    <div style="float:left;padding-left: 6em; ">
        <a href="#page-new-ticket" data-direction="reverse" id="btn-new-ticket" data-role="button" data-icon="flat-search" data-iconpos="notext" data-inline="false"></a>
        <a href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="flat-plus" data-iconpos="notext" data-inline="false"></a> 
    </div>
</div>

【讨论】：