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

jQuery Mobile中文本输入的奇怪宽度

4 个答案: