将所有标头元素与Jquery mobile中的对齐方式保持在同一行

debugcn 发表于 Dev

ExCode

我想将所有元素保留在jquery移动标题的同一行中，“打印和保存”按钮应对齐到右侧，“标题”应居中，其他元素应保持左对齐，我使用css尝试了不同的方法，但仍然无法成功jsfiddle样本

Html

<div data-role="page" id="runTicketDetailsPage" data-theme="a">
<div data-role="header" data-theme="a" data-position="fixed">
   <div data-role="controlgroup" data-type="horizontal" data-mini="true">
      <a href="" data-inline="true" data-role="button" data-icon="home">Home</a>
      <a href="" data-inline="true" data-role="button" data-icon="back" id="rtDetailsBtn" >Back</a>
      <span id="rtOffline" data-inline="true" style="color: #F00E1A;">ON</span>
      <span id="rtOnline"  data-inline="true" style="color:#0C8227; ">OFF</span>
      <h3  data-inline="true" id="title1">Info</h3>
      <a href="#" data-bind='click: save' id="btnSave" data-inline="true" data-role="button" class="ui-btn-right"
         data-icon="plus">Save</a>
      <a href="" data-inline="true" data-role="button" id="rtDetailsBtn" >Print</a>
   </div>
</div>

SSS

试试这个jsFiddle http://jsfiddle.net/shinde87sagar/Y4Py2/5/

我用过了

data-role="controlgroup"

到各个按钮组。

     <div data-role="page" id="runTicketDetailsPage" data-theme="a">
        <div data-role="header" data-theme="a" data-position="fixed">
         <div data-role="controlgroup" data-type="horizontal" class="ui-btn-left" data-mini="true">
           <a href="" data-inline="true" data-role="button" data-icon="home">Home</a>
           <a href="" data-inline="true" data-role="button" data-icon="back" id="rtDetailsBtn" >Back</a>
        </div>
       <div class="center-wrapper">
         <span id="rtOffline" data-inline="true" style="color: #F00E1A;">ON</span>
          <span id="rtOnline"  data-inline="true" style="color:#0C8227; ">OFF</span>
          <h3  id="title1">Info</h3>
       </div>

      <div data-role="controlgroup" data-type="horizontal" class="ui-btn-right" data-mini="true">
       <a href="#" data-bind='click: save' id="btnSave" data-inline="true" data-role="button" 
     data-icon="plus">Save</a>
       <a href="" data-inline="true" data-role="button" id="rtDetailsBtn" >Print</a>
   </div>
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。