Question

我想在jquery移动标题中将所有元素保持在同一行中，打印和保存按钮应该对齐到右侧，标题应该是中心，其他元素应该保持对齐，我尝试使用css以不同的方式但仍然没有成功 jsfiddle sample

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>

Answer 1

试试这个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>

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

1 个答案: