jQuery Mobileのテキスト入力の奇妙な幅

Question

jQuery Mobileのテキスト入力の幅に関連した奇妙な振る舞いを見てきました。

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Test</h1> 
    </div> 

    <div data-role="content"> 
     <input type="text" value="192.168.1.1"></input> 

     <a data-role="button">Connect</a> 
    </div> 
</div> 

1つはまたjsFiddleで例えばbrowserwindowの幅を減らすことによって、この現象を再現することができます。

jsFiddle：
http://jsfiddle.net/QxYMa/

、これは正常な動作または単にバグですか？テキスト入力とボタンの幅が同じになるように、どうすれば "訂正"できますか？

Answer 1

入力とボタンには異なるCSSが自動的に適用されました。

<div data-role="page"> 
    <div data-role="header"> 
     <h1>Test</h1> 
    </div> 

    <div data-role="content"> 
     <input type="text" value="192.168.1.1" style="width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;"/> 
     <br/> 
     <a data-role="button" style="width:100%;margin:0">Connect</a> 
    </div> 
</div> 

入力ボックス・モデルがオフだった、とボタンのマージンがオフだったように思われる：私はそれらの両方のためのCSSは目に見えて一貫性を保つために見えた次のCSSを追加しました。 ここでは、これについていくつかの光を当てるように見えるボックスモデルについて話している良い記事です：http://www.jefftk.com/news/2012-02-18.html

希望に役立ちます！

Answer 2

私のコアjquery mobile structure.cssの開始直前に、より完全なCSSリセットを追加しました。これはあなたを助けるかもしれません。

/* CSS Reset*/html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {margin:0;padding:0;border:0;outline:0; font-size:100%;vertical-align:baseline; background:transparent}body {line-height:1}ol,ul {list-style:none}blockquote,q {quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus {outline:0}ins {text-decoration:none}del {text-decoration:line-through}table {border-collapse:collapse;border-spacing:0} 

Answer 3

例として、新しいテーマを追加できます。下のケースでは、テーマを追加しました。テーマにさらにCSSを追加し、入力エレメントにdata-theme = "f"を呼び出します。それをあなたの心の中身に合わせてスタイルすることができます。注意すべき点が1つあります。 ！importantを使用して、JQMによって設定された基本サイズを上書きする必要があるかもしれません。

.ui-bar-f input { 
    font-family: 'HelveticaNeueLTStd55Roman', Helvetica, Arial, sans-serif; 
    width:250px !important; 
} 

Answer 4

入力フィールドは全角でなければなりません。幅を設定すると80pxになりますが、幅は制限されます。このフィドルをノーマルバージョンとミニサイズバージョンのラインでご覧ください。

http://jsfiddle.net/den232/WzH3Y/

.floatleft { 
    float:left; 
} 
.floatright { 
    float:right; 
} 
.forceinline{ /* Prevent fieldcontain from doing a BLOCK thing */ 
    display:inline !important; 
} 
.textwidth { /* limit width of input fields */ 
    width:80px; 
} 
.closespacing { /* controls spacing between elements */ 
    margin:0px 5px 0px 0px; 
} 
.bigselect { /* centers select with big buttons */ 
    padding: 0px; 
    margin:2px 5px 0px 0px; 
} 
.biginputheight { /* matches text input height to big buttons */ 
    padding-top:10px !important; 
    padding-bottom:12px !important; 
} 
.miniinputheight { /* matches text input height to minibuttons */ 
    padding-top:5px !important; 
    padding-bottom:5px !important; 
} 
<div data-role="page" class="type-home"> 

<ul data-role="listview"> 
    <li data-role="fieldcontain">first LI line</li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'> 
     Big Buttons<br>More Text 
    </div> 


    <div class='floatleft textwidth'> 
     <input type="text" placeholder="left" class='biginputheight'></input> 
    </div> 

    <div class='floatright textwidth'> 
     <input type="text" placeholder="right" class='biginputheight'></input> 
    </div> 

    </li> 
    <li data-role="fieldcontain"> 

    <div class='floatleft closespacing'>  
     Small Buttons 
    </div> 


    <div class='floatleft textwidth'> 
     <input type="text" placeholder="e2" class='miniinputheight'></input> 
    </div> 


    <div class='floatright closespacing'> 
     <div class='floatright closespacing'>  
     e3 Text<br>on right 
     </div> 
     <div class='floatright textwidth'> 
     <input type="text" placeholder="e3" class='miniinputheight'></input> 
     </div> 
    </div> 
    </li> 
    <li data-role="fieldcontain">last LI line</li> 

</ul><!-- /listview -->