jquery - Jquery移动文本框并选择具有相同高度的菜单

Question

我在 ay 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>

截屏：

单击此处获取 JS Fiddle

我怎样才能实现它？

谢谢你。

Answer 1

尝试添加

  data-mini="true"

到选择框。它将显示选择框的缩小版本。此外，您也无法对需要修改 css 的两种输入类型进行精确的高度匹配。

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

我还尝试使用自定义 jquery 移动插件。只需使用代替日期字段。试试看。