在 jquery mobile 中制作内联控件答案

【问题标题】：Making inline controls in jquery mobile在 jquery mobile 中制作内联控件
【发布时间】：2015-04-08 02:07:34
【问题描述】：

我正在动态生成一个可折叠的集合，其中有一个用于搜索目的的文本框和搜索按钮。

我正在遍历方法的结果并将动态生成的可折叠集绑定到 div 。我的问题只是搜索部分对齐

当我在大屏幕手机中查看时，我在搜索文本框和按钮之间获得了空间，而当我在小屏幕手机中查看时，按钮在文本框下方环绕。

我的代码是：

var FillHis = '<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="b" id="set" data-iconpos="right"  class="ag_nomargin" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">';
                    FillHis += '<div class="ui-field-contain ag_noborder" style="padding-top:0px !important;padding-bottom:5px !important;">';
       FillHis += '<div  style="width:57%;float: left;position:relative; margin: -5px 0px 0px 1px;"> <input type="search"  name="search" id="txtSearchDrug" placeholder="Search drug"></div> ';
       FillHis += '<div style="width:42; float: right;position:relative; margin: -1px 0px 0px 0px;"><a id="A13" style="height:14px;line-height:12px;padding-right: 6px; padding-left: 6px;float:right" onclick="LoadFillHistory();" href="#"  > Show All</a>  <a id="A12" style="height:14px;line-height:12px;padding-right: 6px; padding-left: 6px;float:right"onclick="SearchDrug();" href="#" > Go</a></div></div>';

我尝试使用“controlgroup”和 data-type="horizontal" 仍然没有用。我只想让我的两个按钮固定大小，文本框会随着屏幕的大小而增加。请有人帮助我。我还加了截图

【问题讨论】：

类似这样的：jsfiddle.net/ezanker/x97s3752 ?
感谢小提琴......有没有办法在控制组项目之间添加空间......
我创建了一个带有间隔按钮的答案。

标签： css jquery-mobile

【解决方案1】：

您可以通过将输入和按钮放在单独的 DIV 中然后应用一些 CSS 来实现这一点。

<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="b" id="set" data-iconpos="right" class="ag_nomargin" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
    <div data-role="collapsible" data-collapsed="false">
         <h4>heading</h4>
         <div>
            <div class="container">
                <div class="right"> 
                    <a href="#" data-role="button" data-theme="b" data-inline="true">Show All</a>
                    <a href="#" data-role="button" data-theme="b" data-inline="true">Go</a>
                </div>
                <div class="left">
                    <input type="search" name="search" id="txtSearchDrug" placeholder="Search drug" />
                </div>
            </div>
        </div>
    </div>
</div>


.container {
    height: auto;
    overflow: hidden;
}
.right {
    width: 154px;
    float: right;
    text-align: right;
}
.right a:first-child {
    margin-left: 0;
    margin-right: 1px;
}
.right .ui-btn-inner {
    padding-left: 12px;
    padding-right: 12px;
}
.right a:last-child {
    margin-left: 1px;
    margin-right: 0;
}
.left {
    float: none;
    /* not needed, just for clarification */
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}
.left .ui-input-search {
    margin-top: 10px;
}

无论折叠项是在设计时添加还是动态添加，这都会起作用。

工作DEMO

【讨论】：