jquery的移动：字段包含限幅

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

如果设置一个形式宽度jquery的移动：字段包含限幅

form { 
width: 300px; 
}

于iPhone 4s，在纵向模式下，用户名标签被显示在同一行作为用户名输入，以及用户名标签被裁剪。如果用户名标签和输入的宽度不够，则应在输入上方显示标签。为什么？如果我删除宽度：300px，它对宽度的反应很好。

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

感谢

来源

2014-10-12 eastwater

领域包括使用基于屏幕宽度将标签贴媒体查询。你可以使用一些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

来源

2014-10-12 15:19:49 ezanker

谢谢。从演示中，标签始终位于输入之上。我喜欢有回应。对于大屏幕的iPad，我喜欢标签位于输入的左侧。 – eastwater 2014-10-12 19:11:51

就我而言，输入部分是一个包含许多不同输入的div。所以我使用带有图例的fieldset。 – eastwater 2014-10-12 19:13:30

@Dave，将窗体宽度设置为300px可以阻止它响应，那么你想要哪个？ – ezanker 2014-10-12 19:23:07

jquery的移动：字段包含限幅

回答

相关问题