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。建议改用类。