Css 在jquery mobile中创建内联控件

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

我循环遍历一个方法的结果，并将动态生成的可折叠集绑定到一个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，但仍然没有用。我只想让我的两个按钮固定大小，文本框将随着屏幕的大小而增加。谁能帮帮我吗。我还添加了截图

---

您可以通过将输入和按钮放在单独的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;
}

无论塌陷是在设计时添加还是动态添加，这都将起作用

工作

---

类似这样的东西：？提琴的Thanx………有没有办法在控制组项目之间添加空格…我用空格键创建了一个答案。