Мне нужно всегда располагать текстовое поле и кнопку рядом друг с другом. Логика примерно такая: кнопка всегда будет в правой части экрана. Текстовое поле должно занимать оставшуюся часть ширины в левой части. Я пытался задать определенный% ширины для текстового поля. Но я должен поддерживать как устройства Android, так и iOS. Так что существует проблема с изменением размеров экрана между ними, и это решение не работает хорошо для всех размеров экрана. код, который я использовал
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <div style="display:inline;"> <input type="text" placeholder="Enter your user name"></input> <a href="#" data-role="button" data-inline="true" class="normalBtn" style="margin-top:0px">Check</a> </div> </div> </div> </body> </html>
Демо здесь - http://jsfiddle.net/d7T4E/
Я не уверен, но вы можете попробовать это:
<html> <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> </head> <body> <div data-role="page"> <div data-role="content"> <div style="display:inline;"> <input type="text" style="width:50% !important; float:left;" placeholder="Enter your user name"></input><a href="#" data-role="button" data-inline="true" class="normalBtn" style="margin-top:0px; float:left;">Check</a> </div> </div> </div> </body> </html>