JQuery mobile styling issue

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" Также в качестве быстрого предложения я бы рекомендовал не использовать идентификаторы в JQuery Mobile из-за навигации AJAX. Вместо этого рекомендуется использовать классы.