2012-03-14 5 views
0

を、テキストとテキストボックスを持っている:再スタイリングJQueryMobile iphoneのwebkitのための - 私はフォームを持っているiPhone上で同じ行に

私が持っているしたいと思います。同じ行に

from $37,400 up to $[textbox here] 

。ランドスケープモードでは、テキストの幅をどれくらい遠ざけても、縦長では機能しますが、縦長ではありません。私はオーバーライドするスタイルを探しています。 http://jsfiddle.net/mckennatim/xwFW9/1/を開き、ブラウザのページを狭めて問題をシミュレートできます。スタイルに

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title> - jsFiddle demo</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> 

    <style type='text/css'> 
    #upto4 { 
     width: 65px; 
     margin-left: 5px; 
     margin-right: 5px; 
    } 
    </style> 

<script type='text/javascript'>//<![CDATA[ 

</script> 
</head> 
<body> 
<div data-role="page" id="calcs" data-add-back-btn="true"> 
    <div data-role="header" data-position="fixed"> 
     <h1>graphics2</h1> 
    </div> 
    <div data-role="content"> 
    <form action="#" method="get"> 
     <div id="ratelist"> 
      <legend><b>Ordinary Tax Rates</b></legend> 
      <div data-role="fieldcontain"> 
       <input type="range" name="slider" id="rate4" value="30" min="0" max="100" data-highlight="true" data-mini="true" /> 
        up to $: <br/>       
       <p id="spupto4"> from $84,600 to 
        <input type="text" name="nupto4" id="upto4" value="178653" data-mini="true"/>      
       </p><br/> 
      </div> 
      <div data-role="fieldcontain">    
       <label for="slider">% rate:</label> 
       <input type="range" name="slider" id="rate5" value="33" min="0" max="70" data-highlight="true" data-mini="true" /><br/> 
       <label for="slider">up to $</label> 
       <input type="range" name="slider" id="upto5" value="388350" min="0" max="3000000" data-highlight="true" data-mini="true" /><br/> 
      </div> 
     </div> 
    </form> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h4>test</h4> 
    </div> 
</div> 
</body> 
</html> 
+1

私はディスプレイを追加するために必要な、それを見つけた:インラインブロック;表示を無効にする:ブロック;申し訳ありませんが、私はちょうどその投稿を削除することができたら、それを読んだことがあります。 – mcktimo

+0

これを回答として投稿してください。あなたはあなたのスコアを増やすかもしれません:) – uday

答えて

0

<style type='text/css'> 
    #upto4 { 
    width: 65px; 
    margin-left: 5px; 
    margin-right: 5px; 
} 

追加表示:インラインブロック。表示をオーバーライドする:ブロック;

<style type='text/css'> 
#upto4 { 
    width: 65px; 
    margin-left: 5px; 
    margin-right: 5px; 
    display: inline-block; 
} 

関連する問題