javascript - 全宽选择菜单与 jQuery Mobile 中的按钮相结合

Question

我正在尝试获取一个页脚工具栏，由两个按钮(上一个/下一个)和一个选择菜单组成。如何使选择菜单使用全宽？

参见jsFiddle example了解详情。

使用控制组使其看起来像我想要/需要的方式，只是它没有填充整个宽度。我还尝试了字段集、导航栏、网格，但到目前为止还没有达到想要的结果。

<div data-role="controlgroup" data-type="horizontal" id="footerControlgroup" >
  <button id="prev" class="ui-btn ui-corner-all ui-icon-carat-l ui-btn-icon-notext ui-mini">Prev</button>
  <button id="next" class="ui-btn ui-corner-all ui-icon-carat-r ui-btn-icon-notext ui-mini">Next</button>
  <select id="select" data-mini="true">
    <option>pick me...</option>
  </select>
</div>

Answer 1

这可能会让你继续:

var next= document.getElementById('next');
var select= document.getElementById('select');
select.style.width= 
  (select.parentNode.offsetWidth -
   next.getBoundingClientRect().right
  )+'px';