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的移動：字段包含限幅

回答

相關問題