Jquery移动样式问题

Question

我使用jQuery mobile制作网站，出于某种原因它不会让我把文本框和按钮放在同一行。

<div data-role="footer" data-position="fixed">
            <input type="text" placeholder="Your Message" id="usermsg" /><input type="button" value="Send!" id="submitmsg" />
</div>

Answer 1

使用网格是执行此操作的正确方法。

  <label for="points">Textbox and a Button on the same line.</label>
  <div data-role="footer" data-position="fixed">
    <div class="ui-grid-a">
      <div class="ui-block-a">
            <input type="text" data-inline="true" placeholder="Your Message" id="usermsg" />
      </div> 
     <div class="ui-block-b">
            <input type="button" value="Send!" id="submitmsg" data-inline="true"/>
     </div>
   </div>

如果要更改网格大小，只需添加一些css即可。例如。 class="ui-block-a myField" 另外作为一个快速的建议，由于AJAX导航，我建议不要在JQuery Mobile中使用ID。建议改用类。