jquery mobile中的输入字段不会扩展以填充屏幕答案

【问题标题】：input fields in jquery mobile dont expand to fill the screenjquery mobile中的输入字段不会扩展以填充屏幕
【发布时间】：2013-07-12 19:44:48
【问题描述】：

正如标题所说，

当我在 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>

【问题讨论】：

标签： jquery-mobile

【解决方案1】：

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

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

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

【讨论】：

我知道这是旧帖子 - 但这也适用于 <ul> 吗？我的似乎是固定宽度，我不知道为什么？