html - 使用 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>

这行得通。只要您在计算机浏览器中全屏查看，标签、输入字段和按钮都将位于同一行。但是如果我们缩小窗口，所有三个元素将分别显示在一行中。有什么办法可以让标 checkout 现在一行，输入框+按钮在下一行？

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