奇怪的宽度的文本输入在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中减小browserwindow的宽度来重现此行为。

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

就像一个例子你可以添加一个新的主题。在下面的例子中，我添加了一个主题F.向主题添加更多css，然后在您的输入元素上调用data-theme =“f”。然后，您可以将它设计为您的内容。有一点需要注意。您可能需要使用！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 -->