将jquery移动自动完成并排并选

时间:2014-04-23 21:39:07

标签: jquery-mobile

我正在尝试将jquerymobile移动设备(使用版本1.3)并排自动完成并自动完成,但是自动完成搜索框未与选择菜单对齐并且在顶部被切断。

我试过这个

<div class="ui-grid-a">
 <div class="ui-block-a" style="float:left;">
   <label for="TargetTypeList" class="ui-hidden-accessible">All Uses</label>
   <select name="TargetTypeList" id="TargetTypeList">
    <option value="standard">Standard: 7 day</option>
    <option value="rush">Rush: 3 days</option>
  </select>
</div>
<div class="ui-block-b" style="float:left;">
  <ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Chrysler</a></li>
<li><a href="#">Dodge</a></li>
<li><a href="#">Ferrari</a></li>
<li><a href="#">Ford</a></li>
<li><a href="#">GMC</a></li>
<li><a href="#">Honda</a></li>
<li><a href="#">Hyundai</a></li>
<li><a href="#">Infiniti</a></li>
<li><a href="#">Jeep</a></li>
<li><a href="#">Kia</a></li>
<li><a href="#">Lexus</a></li>
<li><a href="#">Mini</a></li>
<li><a href="#">Nissan</a></li>
<li><a href="#">Porsche</a></li>
<li><a href="#">Subaru</a></li>
<li><a href="#">Toyota</a></li>
<li><a href="#">Volkswagen</a></li>
<li><a href="#">Volvo</a></li>
</ul>
    </div>

(现场演示:http://jsfiddle.net/gE44j/)和表格布局没有运气。

有关如何正确格式化它们的任何想法吗?

1 个答案:

答案 0 :(得分:1)

jQM在过滤器输入周围添加负边距。尝试添加此CSS:

.ui-listview-filter-inset {
    margin: 4px 0 0 0 !important;
}
  

<强> UPDATED FIDDLE