Css 类似IOS工具栏的jquerymobile设计

我知道这是个愚蠢的问题，但我没有找到答案 我想设计这个。颜色并不重要 及

到目前为止，我已经做到了

这是密码

  <!-- Filter Toolbar -->
            <div data-role="header">
                <div data-role="navbar" data-iconpos="left">
                    <ul>
                        <li><a type="button" id="filterdate" >Date</a></li>
                        <li><a type="button" id="filtermember" class="ui-btn-active">Member</a></li>
                        <li><a type="button" id="filtersubject">Subject</a></li>

                    </ul>
                </div>

            </div>
            <!-- /Filter Toolbar -->
        <div data-role="footer">
                <div data-role="navbar" data-mini="true" data-iconpos="left">
                    <ul>
                        <li> <a href="#"  data-icon="edit">Edit</a></li>

                        <li><a href="#"   data-icon="refresh" data-iconpos="notext">Refresh</a></li>
                        <li>
                            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="notext" data-theme="a" data-inline="true"></a>

                            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="notext" data-theme="a" data-inline="true"></a>
                        </li>

                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->

你必须搞乱标题按钮组的宽度，但除此之外，它看起来就像你发布的图片。减去颜色

<div data-role="header">
    <div data-role="controlgroup" data-type="horizontal">
        <a href="#" data-role="button" class="headerButton">Member</a>
        <a href="#" data-role="button" class="headerButton">Subject</a>
        <label for="select-choice-0" class="select">Date</label>
        <select name="select-choice-0" id="select-choice-0" class="headerButton">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
        </select>
    </div>
</div>


<div data-role="footer">
    <div data-role="navbar" data-mini="true" data-iconpos="left">
        <a href="#"  data-icon="edit">Edit</a>
        <div data-role="controlgroup" data-type="horizontal" style="float: right;">
            <a href="#" data-role="button" data-icon="arrow-l" data-iconpos="left" data-theme="a">&nbsp;</a>
            <a data-role="label">1</a>
            <a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right" data-theme="a" data-inline="true">&nbsp;</a>
        </div>
    </div><!-- /navbar -->
</div><!-- /footer -->

日期
选择1
选择2
选择3
选择4

您可以覆盖JQM css样式。您可以为相同的样式提供JSFIDLE吗！我已经提供了CodeJSHiddle链接，非常感谢，但是成员主题和日期在左侧，我想在工具栏中拉伸这三个按钮是的，这就是为什么我说你需要弄乱宽度。我试着将它的风格设置为100%。但那没用。它帮了我很多，至少我已经接近设计thanx了