Question

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

但是现在我到了一个我迷路的地方。任何人都可以看看这个吗？

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

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

JQuery Mobile Header对齐变得混乱

2 个答案: