mobile - 将 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>