JQueryMobile - 設置fieldcontain的標籤寬度

我google了很多，這似乎是一個共同的問題。在過去，我使用<table>解決了這個問題，我知道JQM有某種data-grid，但我想通過CSS解決它。JQueryMobile - 設置fieldcontain的標籤寬度

問題很簡單：我有n字段集，由<label>和<input>組成，我想所有標籤/輸入對齊在一起，例如：

First:   [ input ] 
Second:  [ input ] 
Third:   [ input ] 
... 
Loooong-one: [ input ]

這是一個例子問題：Fiddle

HTML

<div data-role="content"> 
    <div data-role="fieldcontain"> 
     <label for="first">First:</label> 
     <input type="text" name="first" value="something" /> 
    </div> 
    <div data-role="fieldcontain"> 
     <label for="second">Second:</label> 
     <input type="text" name="second" value="something" /> 
    </div> 
</div>

CSS

div[data-role='fieldcontain'] label{ 
    background: blue; 
    width: 200px !important; /* this is not working :(*/ 
}

正如你所看到的，我想給一個固定的寬度（例如200px）到所有<label>元素。添加藍色背景僅用於測試我正在使用的CSS選擇器的正確性。

來源

2013-11-20 BeNdErR

你需要添加ID的輸入，從而標籤能夠正確關聯：

<div data-role="fieldcontain"> 
     <label for="first">First:</label> 
     <input type="text" id="first" name="first" value="something" /> 
    </div> 
    <div data-role="fieldcontain"> 
     <label for="second">Second:</label> 
     <input type="text" id="second" name="second" value="something" /> 
    </div>

您的標籤將隨後以相同的寬度自動排隊;然而，當頁面大於448px時，fieldcontain元素將使標籤成爲頁面的28％，而輸入則成爲頁面的72％。當頁面大小小於448像素時，標籤會堆疊在輸入上方。

在這種情況下，您的CSS設置標籤寬度將起作用，但由於輸入設置爲78％，因此您將無法獲得所需的結果。如果28％/ 78％的分割確實不適合你，你應該放棄fieldcontain元素，並實現你自己的浮動顯示的div。

來源

2013-11-20 15:36:00 ezanker

從jqm 1.4.5開始，我找到了一個簡單的方法來做到這一點，即在jqm css加載後的某處插入以下css。只需將「#myForm」和「10em」改爲適合您的需求即可。也似乎工作正常，而不必使用ID屬性。

CSS

@media (min-width:28em) { 
    #myForm .ui-field-contain { 
     min-height:2.5em; 
    } 
    #myForm .ui-field-contain > label { 
     position:absolute; 
     width:10em; 
    } 
    #myForm .ui-field-contain > label ~ [class*=ui-] { 
     position:absolute; 
     right:0; 
     left:10em; 
     width:auto; 
    } 
}

公平的警告，我是最後一個人，你應該問這是一個最佳實踐，所以在你自己的風險。

來源

2017-01-19 06:28:43

JQueryMobile - 設置fieldcontain的標籤寬度

回答

相關問題