Question

我正在使用jQuery mobile。我想要一个固定的标题，我在其中放置标题，菜单按钮，下拉列表和加载按钮。这个结构的目的是在内容区域中加载一个列表，我希望在滚动列表的同时将标题和内容放在固定位置。

<div data-role="page" id="home" data-theme='b'>

        <!--************** This is the menu panel **************-->
        <div data-role="panel" id="mypanel" data-theme="b"> 
            <h1 style="background:#b1ea99;text-align:center;">Menu</h1>
            <ul data-role="listview" style="color:white;">
                <li><a data-role="button" id="" data-rel="close" style="color:white;"><i class="lIcon fa fa-stop"></i> Close menu</a></li> 

            </ul>



        </div><!-- /panel -->



        <div data-role="header" data-position="fixed"  data-theme='b' data-tap-toggle="false">
            <a href="#mypanel" id="menu" data-ajax="false"><i class='lIcon fa fa-tasks'></i></a>
            <h1>Bangla</h1>
            <a href="#mypanel" data-role='button' class='ui-btn-right ui-btn' data-ajax="false" style="width:100px;background:#4488d9;color:white;padding:8px;">Menu</a>
            <br/>
            <div class="ui-grid-a">
                    <div class="ui-block-a">

                    <select name="year" id="year" data-theme="a" style="width:100%">
                         <option value="">Select a year</option>
                         <option value="1990">1990</option>
                         <option value="1991">1991</option>
                         <option value="1992">1992</option>
                         <option value="1993">1993</option>
                         <option value="1994">1994</option>
                         <option value="1995">1995</option>
                         <option value="1996">1996</option>
                         <option value="1997">1997</option>
                         <option value="1998">1998</option>
                         <option value="1999">1999</option>
                         <option value="2000">2000</option>
                         <option value="2001">2001</option>
                         <option value="2002">2002</option>
                         <option value="2003">2003</option>
                         <option value="2004">2004</option>
                         <option value="2005">2005</option>
                         <option value="2006">2006</option>
                         <option value="2007">2007</option>
                         <option value="2008">2008</option>
                         <option value="2009">2009</option>
                         <option value="2010">2010</option>
                         <option value="2011">2011</option>
                         <option value="2012">2012</option>
                         <option value="2013">2013</option>

                    </select>

                </div>
                    <div class="ui-block-b">
                    <input type="button" value="Load" data-theme="a" style="width:100%">
                </div>
            </div>
        </div><!--Header-->


        <div data-role="content" style="padding-left:4px;padding-right:4px;">



        </div><!--content-->



    </div>

问题是下拉列表和加载按钮不在同一行。加载按钮有点下降。另外我希望它们都占据屏幕宽度的50％。您可以在JSFiddle

中查看问题

我尝试了width:100%（以获取完整网格宽度），display:inline，data-position:inline等等。我错过了什么？请查看JSFiddle并更正我。我希望这两个元素在同一行和相同的宽度。

Answer 1

您可以使用 navbar 小部件：

<div data-role="navbar" class="mynav">
    <ul>
        <li>
            <select name="year" id="year" data-theme="a">
                <option value="">Select a year</option>
                <option value="1990">1990</option>
                <option value="1991">1991</option>
            </select>
        </li>
        <li>
            <input type="button" value="Load" data-theme="a" />
        </li>
    </ul>
</div>

然后你只需要一点CSS来获得正确的边距：

.mynav .ui-select, .mynav .ui-btn {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 2px;
    margin-right: 2px !important;
}

更新了小提琴 DEMO

Answer 2

检查更新的链接：＆＃34; http://jsfiddle.net/3zLdu68o/3/＆＃34;

   <fieldset class="ui-grid-a">
                <div class="ui-block-a">
                  //..do stuff here

                </div>

                <div class="ui-block-b">
                   //do stuff here
                    </div>
      </fieldset>

选择＆amp;按钮不是全宽而不是内嵌 - JQM

2 个答案: