我需要始终并排放置一个文本字段和一个按钮。逻辑是这样的，按钮将始终位于屏幕的右侧。文本字段应该占据左侧的其余宽度。我尝试为文本字段指定一个特定的%宽度。但是我必须同时支持安卓和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>
关于html5 - 在同一行中并排对齐文本字段和按钮，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8112875/