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> 

예를 들어 jsFiddle에서 브라우저 창의 너비를 줄이면이 ​​동작을 재현 할 수도 있습니다.

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

이 정상적인 행동을하거나 버그인가? 텍스트 입력과 버튼의 너비가 같아 지도록 어떻게 수정할 수 있습니까?

Answer 1

입력과 버튼에는 자동으로 적용되는 CSS가 있습니다. 나는 그들 모두를위한 CSS가 눈에 띄게 일관성을 보였다 다음 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> 

입력 상자 모델가 꺼져 있음을 나타납니다, 그리고 버튼 이익률은 벗어났다. 여기에 좋은 기사가 있습니다. 이것에 대해 약간의 빛을 비춰주는 상자 모델에 대해 이야기합니다. http://www.jefftk.com/news/2012-02-18.html

희망이 있습니다.

Answer 2

내 핵심 jquery 모바일 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

예제와 같이 새 테마를 추가 할 수 있습니다. 아래의 경우에는 테마를 추가했습니다. F. 테마를 추가 한 다음 input 요소에서 data-theme = "f"를 호출하십시오. 그런 다음 당신의 마음 내용에 스타일을 적용 할 수 있습니다. 주목할 사실 하나. ! important를 사용하여 JQM이 설정 한 기본 크기를 재정의해야 할 수도 있습니다.

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

Answer 4

입력란은 전체 너비가되고 싶습니다. 너비 설정 : 80px는 너비를 제한합니다. 이 바이올린을 일반 버전과 미니 버전의 라인으로 볼 수 있습니다.

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

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

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