将文本框和按钮并排排列在同一行中

我需要并排定位文本框和按钮。逻辑是这样的 - 按钮将始终位于屏幕的右侧。 textfield应占据左侧的宽度的其余部分。我试着给出textfield的特定％宽度。但是我必须同时支持android和iOS设备。因此，它们之间存在各种屏幕尺寸的问题，并且该解决方案的确存在不是所有的屏幕sizes.This很好地工作是我用过将文本框和按钮并排排列在同一行中

<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/

来源

2011-11-13 user700284

我不是当然，但你可以试试这个：

<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>

来源

2011-11-13 19:12:30

谢谢你的答案。但那不是我正在寻找的，因为我希望textfield占用除按钮所需空间外的全部宽度。 – user700284

将文本框和按钮并排排列在同一行中

回答

相关问题