Question

我正在尝试在标题中添加几个控件。但是，下拉列表和分组复选框不断落入自己的行。

这是我到目前为止的一个方面：

Answer 1

您可以使用“四列”布局网格。布局网格用于“内容”部分，但仍然可以在“标题”部分使用。

文件在这里： http://jquerymobile.com/demos/1.1.1/docs/content/content-grids.html

 <div class="ui-grid-c">
     <div class="ui-block-a">Block A</div>
     <div class="ui-block-b">Block B</div>
     <div class="ui-block-c">Block C</div>
     <div class="ui-block-d">Block D</div>
 </div><!-- /grid-c -->

默认情况下，此网格创建25％/ 25％/ 25％/ 25％宽度，因此您可以添加CSS样式以调整宽度，如下所示：

 <div class="ui-grid-c">
     <div class="ui-block-a" style="width:15%;">Block A</div>
     <div class="ui-block-b" style="width:50%;">Block B</div>
     <div class="ui-block-c" style="width:20%;">Block C</div>
     <div class="ui-block-d" style="width:15%;">Block D</div>
 </div><!-- /grid-c -->

您的代码可能是这样的：

<!-- Home -->
<div id="page1" data-role="page">
  <div data-role="header" data-theme="a" data-position="fixed">

    <div class="ui-grid-c">
        <div class="ui-block-a" style="width:15%;">
            <a class="ui-btn-left" 
            href="#page1" 
            data-iconsize="26" 
            data-role="button"
            data-theme="b" 
            data-transition="fade"
            data-inline="true"
            data-iconpos="left"
            data-icon="ios-pack-color-left-arrow">Button</a>
        </div>
        <div class="ui-block-b" style="width:260px;">

            <fieldset data-role="controlgroup" data-type="horizontal">

            <input id="checkbox1" name="checkbox1" type="checkbox">
            <label for="checkbox1">
                Checkbox
            </label>
            <input id="checkbox2" name="checkbox2" type="checkbox">
            <label for="checkbox2">
                Checkbox
            </label>
            <input id="checkbox3" name="checkbox3" type="checkbox">
            <label for="checkbox3">
                Checkbox
            </label>
            </fieldset>

        </div>
        <div class="ui-block-c" style="width:150px;padding-top:5px;">

            <select id="selectmenu1" name="selectmenu1" data-mini="true">
                <option value="option1">
                    Dropdown Box
                </option>
            </select>
        </div>
        <div class="ui-block-d" style="width:20%;text-align:right;">
            <a href="#page1" data-iconsize="26" 
            data-role="button" data-theme="b"
            data-transition="fade" data-iconpos="left" 
            data-icon="ios-pack-color-star">Button</a>
        </div>
    </div><!-- /grid-b -->

  </div>
  <div style="padding: 15px;" data-role="content">
  </div>
</div>

谢谢。

jquerymobile，将控件放在标题中

1 个答案: