1

正如标题所说，

当我在 jquery 移动页面中使用输入字段时，它不会将输入字段扩展到屏幕的整个宽度。

如果您使用小屏幕设备，它很合适，但是当您在桌面浏览器中查看页面时，输入字段仅显示浏览器宽度的 2/3。

有没有办法将其设置为扩展到浏览器/屏幕的宽度？

这是我的代码：

http://jsfiddle.net/B8JDt/2/

<body>
<div data-role="page" id="page" onLoad="initialiseFields()">
  <div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > <a href="" onclick="history.back(-1); return false;">Back</a>
    <h1>New Claim</h1>
  </div>
  <div data-role="content">
    <ul class="ui-li" data-role="listview" id="list" data-inset="true"  data-scroll="true">
      <li data-role="list-divider">
        <h2 id="itemTitle">Title</h2>
      </li>

      <li>
        <h3>Journey From:</h3>
        <div data-role="fieldcontain">
          <input type="text" name="claimTitle" id="textFieldJourneyFrom" value="" />
        </div>
      </li>
      <li>
        <h3>Journey To:</h3>
        <div data-role="fieldcontain">
          <input type="text" name="claimTitle" id="textFieldJourneyTo" value="" />
        </div>
      </li>

    </ul>
    <div data-role="navbar">
      <ul>
        <li><a href="hello.html" data-theme="b">Save</a></li>
      </ul>
    </div>
  </div>
</div>
</body>
4

1 回答 1

2

jQuery Mobile 有一个错误的 box-resizing CSS3 规则实现。

要解决此问题，请使用此 CSS：

@media all and (min-width: 28em){
    .ui-input-text  {
        box-sizing: none !important;
        -moz-box-sizing: none !important;
        -webkit-box-sizing: none !important;
        width: 100% !important;
        display: inline-block !important;
    }
}

Fistbox-sizing: none不存在，但它会覆盖默认值，最好像这样覆盖它，然后从 css 文件中手动删除它。

工作示例：http: //jsfiddle.net/B8JDt/3/

于 2013-07-12T11:44:48.140 回答