Jquery移动文本框和选择高度相同的菜单

Question

我在一个jquery移动应用程序中有一个文本菜单和一个下拉菜单。但问题是文本菜单的高度低于选择菜单的高度。

这使得UI看起来很糟糕。

代码：

<div data-role="header" data-position="fixed">
    <h1>heading</h1>
</div>
<div data-role="content">
    <div class="ui-grid-a" style="margin-bottom:10px;">
        <div class="ui-block-a" style="width:35%;">
            <input type="date"/>
        </div>
        <div class="ui-block-b" style="width:65%;">
            <select name="select-native-1" id="doctorClinics" data-theme="c" style="padding:0;margin-bottom:0">
                <option value='1' selected='selected'>Option 1</option>
                <option value='1' selected='selected'>Option 2</option>
            </select>
        </div>
    </div>

截图：

  

Click here for JS Fiddle

我怎样才能实现它？

谢谢。

Answer 1

尝试添加

  data-mini="true"

到选择框。它将显示选择框的缩小版本。 此外，您也无法为修改css所需的输入类型提供精确的高度匹配。

试试这个jsfiddle。 http://jsfiddle.net/Bp2eX/2/

我也试图使用自定义jquery移动插件。 只是用来代替日期字段。 试试吧。