2011-11-13 10 views
2

テキストフィールドとボタンを常に並べて配置する必要があります。ロジックはこのようなものです。ボタンは常に画面の右側にあります。テキストフィールドは、左側の幅の残りを占める必要があります。私はtextfield.Butの特定の%幅を与えようとしましたが、両方のアンドロイドと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/

答えて

0

を確かにこれで試すことができます:

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

お返事ありがとうございます。しかし、それは私が探しているものではありません。なぜなら、ボタンに必要なスペースを除いて、テキストフィールドが全幅を占めるようにしたいからです。 – user700284