Question

<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，它对宽度响应很好。

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

由于

Answer 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

jquery mobile：字段包含剪切

1 个答案: