jquery mobile：字段包含剪辑

【问题标题】：jquery mobile: field contain clippedjquery mobile：字段包含剪辑
【发布时间】：2014-10-12 05:36:07
【问题描述】：

<form>
<div class="ui-field-contain">
    <fieldset data-role="controlgroup">
        <legend>Username:</legend>
        <input type="text" name="username">
    </fieldset>
</div>
</form>

如果我设置表单宽度

form {
width: 300px;
}

在 Iphone 4s 上，纵向模式下，用户名标签与用户名输入显示在同一行，并且用户名标签被剪裁。如果用户名标签和输入都没有足够的宽度，则标签应显示在输入上方。为什么？如果我删除宽度：300px，它会很好地响应宽度。

在横向模式下，用户名标签显示在输入上方（如预期的那样）。

谢谢

【问题讨论】：

标签： html iphone jquery-mobile

【解决方案1】：

该字段包含使用基于屏幕宽度的媒体查询来放置标签。修复表单大小时，您可以使用一些 CSS 覆盖媒体查询 CSS：

<form>
    <div class="ui-field-contain">
        <label for="username">Username:</label>
        <input type="text" name="username" id="username" />
    </div>
</form>

form {
    width: 300px;
}
form .ui-field-contain {
    padding-top: 0.8em;
    padding-bottom: 0.8em;
    margin: 0 !important;
}
form .ui-field-contain label, form .ui-field-contain div {
    float: none !important;
    margin: 0;
    margin-bottom: 0.4em;
    width: auto !important;
}

这是一个DEMO

【讨论】：

谢谢。从演示中，标签始终位于输入上方。我喜欢反应灵敏。对于大屏幕的ipad，我喜欢标签在输入的左边。
在我的例子中，输入部分是一个包含许多不同输入的 div。所以我使用带有图例的字段集。
@Dave，将表单宽度设置为 300 像素会阻止它响应，所以你想要哪个？