テキストボックスとボタンを水平に配置

JQuery Mobileを使用して、テキストボックスとボタンを水平に配置することはできますか？テキストボックスとボタンを水平に配置

を使用すると、data-inline="true"はボタンには使用できますが、ボタンやテキストボックスと混在している場合には使用できません。

データインラインexample

data-type="horizontal"もうまくいきませんでした。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
    <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/> 
<script type="text/javascript"> 

    $(document).ready(function(){ 

      $("#clearMeClearMe").click(function(){ 
       //$(this).hide(); 
       $("#clearMe22").val(""); 
      }); 
}); 
</script> 
<body> 


<div data-role="page"> 
    <div data-role="header"> 
     <h1>Textbox Clear Demo</h1> 
    </div><!-- /header --> 

    <div id="content"> 
     <input type="text" id="clearMe22" data-inline="true" name="clearMe22"/>  
      <a href="#" data-role="button" data-icon="delete" 
         data-iconpos="notext" id="clearMeClearMe">Clear</a> 
    </div> 
</div><!-- /page --> 
</body> 
</html>

出典

2012-02-01 Jay Mayu

私はボタンの右側を浮遊し、テキスト入力の幅を制限したときに私のために最善を動作しているようです：

<span> 
      <input style="width:90%;display:inline-block" type="text" id="clearMe22" data-inline="true" name="clearMe22" />  
      <a style="float:right" href="#" class="ui-input-clear" data-role="button" data-icon="delete" 
         data-iconpos="notext" id="clearMeClearMe">Clear</a> 
</span>

http://jsfiddle.net/xeyyr/1/

しかし、他の誰かがより多くを提供することができるかもしれませんエレガントなCSSソリューション。

出典

2012-02-02 22:59:37 Jivings

私はカスタムボタンと同様の解決策を探していますが、あなたのケースでは、データクリア（ 'data-clear-btn'）の組み込みメソッドを使用できると思います。

http://jquerymobile.com/demos/1.3.0-rc.1/docs/demos/widgets/textinputs/

をし、次のようになります：あなたは、これはここに文書見つけることができる質問はjQueryのモバイルからのサポートには、ビルドがなかった頼まれた時点で

<input data-clear-btn="true" name="text-3" id="text-3" value="" type="text">

出典

2013-03-18 17:39:20

。私は彼らが1.3.0からそれをサポートしていることを知っていた:)。 +1をここで指摘してください。 –

そのリンクを見て、 'data-clear-btn'（iPhone5/SafariもWin7/Chrome26もない）の有無にかかわらず、何の違いも見られません。 – Marc

テキストボックスとボタンを水平に配置

答えて

関連する問題