jQuery Mobile <select>样式问题</select>

Question

请考虑以下代码：

<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>

输出如下：

组件和消息之间存在很大差距。如何将这个差距缩小到所需的数量？

（我尝试将width:100px等CSS应用于组件，但没有成功）

编辑：

以下是现场演示： http://jsbin.com/icikif/1

Answer 1

原因可以在jQm的CSS中找到：

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

添加自定义样式表并覆盖宽度设置。

Answer 2

我不确定您要求的是什么，但如果您希望“消息”更接近样式选择，请在CSS中添加此规则：

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

只需将auto更改为所需的金额。