jQuery Mobile的<select/>風格問題

考慮下面的代碼：jQuery Mobile的<select/>風格問題

<div data-role="fieldcontain"> 
    <label for="name">Car</label> 
    <select data-inline="true" data-theme="b"> 
     <option value="volvo">Volvo</option> 
     <option value="saab">Saab</option> 
     <option value="mercedes">Mercedes</option> 
     <option value="audi">Audi</option> 
    </select> 
    <span>message</span>   
</div>

輸出如下： enter image description here

有分量和消息之間有很大的差距。我怎樣才能把這個差距縮小到理想的數量？

（我試過應用CSS如width:100px的組件，但沒有成功）

編輯：

下面是現場演示：http://jsbin.com/icikif/1

來源

2012-09-19 siva636

這裏沒有CSS。看起來像「消息」是正確的，請嘗試將其改爲左側。 – cimmanon

請顯示相關的CSS，並考慮發佈一個現場[JS Fiddle演示]（http://jsfiddle.net/）來重現您的問題。 –

我沒有放置任何額外的CSS。 – siva636

之所以能在JQM的CSS發現：

@media (min-width: 450px) 
.ui-field-contain .ui-select { 
width: 78%; 
display: inline-block; 
}

添加自定義樣式表和覆蓋寬度設置。

來源

2012-09-19 12:59:05 campino2k

我不知道你要求什麼，但是如果你想讓「消息」更接近樣式選擇，請在CSS中添加此規則：

.ui-field-contain .ui-select { 
    width: auto !important; 
}

只是將auto更改爲所需的數量。

來源

2012-09-19 12:54:37 Giona

這會使消息更靠近組件，但會破壞fieldcontain容器的默認樣式。 – siva636

jQuery Mobile的<select/>風格問題

回答

相關問題