有什么方法可以强制两个元素在JQuery Mobile的同一行上保持彼此相邻？

Question

我希望有两个元素保持在同一行.

现在我有这个代码:

<fieldset data-role="controlgroup" data-type="horizontal">
   <label for="textinput">Text:</label>
   <input type="text" id="textinput"/>
   <input type="button" id="searchbutton" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</fieldset>

这有效.只要您在计算机浏览器中全屏查看,标签,输入字段和按钮都将位于同一行.但是如果我们使窗口变小,则所有三个元素将分别显示在一行上.有没有办法让标签出现在一行,输入字段+按钮在下面的行？

Answer 1

您需要覆盖jQM增强功能:

• http://jsfiddle.net/E4EVT/10/
• http://jsfiddle.net/E4EVT/36/(使用网格布局)
• http://jsfiddle.net/E4EVT/42/(使用表格布局)

JS

$('#textinput2').css('width','60%').css('display','inline');

HTML

<div>
    <!-- use span instead of label -->
    <span>Text:</span>
    <input type="text" id="textinput2"/>
    <br />
    <input type="button" id="searchbutton2" data-icon="search"  data-iconpos="notext" onclick="function()"/>
</div>

我想你可能想看看jQM提供的网格布局

• http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html