使用网格将JQuery Mobile元素与同一行对齐

Question

我有五个HTML元素与jquery mobile水平对齐。我使用宽度可变的5列自定义网格（ui-grid-d）。一切都很好，但是元素并没有完全对齐 - 例如，控制组站在一起，段落位于其他组件的下方。

我是移动设计和jQuery Mobile的新手。有没有办法自动对齐所有元素？

<div id="alarmsLog" class="ui-grid-d">
      <div class="ui-bar ui-bar-c">
          <div class="ui-block-a">
            <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Image</a>
          </div>
          <div class="ui-block-b">
            <div data-role="controlgroup" data-type="horizontal" >
                <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext">Left</a>
                <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext">Right</a>
            </div>
          </div>
          <div class="ui-block-c">
            <p>1 di 2</p>
          </div>
          <div class="ui-block-d">
            <input type="text" name="alarmText" id="alarmText" value="Allarme 1"  />
          </div>
          <div class="ui-block-e">
            <a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
          </div>
      </div>
</div>