有什么方法可以强制两个元素在JQuery Mobile的同一行上保持彼此相邻？ [英] Any way to force two elements to stay next to each other on the same row with JQuery Mobile?

问题描述

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

I want to have two elements stay on the same row.

现在我有这个代码：

<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>

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

This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?

推荐答案

你需要覆盖jQM增强功能：

You need to override the jQM enhancements:

• http： //jsfiddle.net/E4EVT/10/


• http：// jsfiddle。 net / E4EVT / 36 / （使用网格布局）


• http：// jsfiddle.net/E4EVT/42/ （使用表格布局）

• http://jsfiddle.net/E4EVT/10/
• http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
• http://jsfiddle.net/E4EVT/42/ (Using the table layout)

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提供的网格布局

I think you might want to look into the grid layout jQM offers

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

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

这篇关于有什么方法可以强制两个元素在JQuery Mobile的同一行上保持彼此相邻？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！