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增强功能：

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

Answer 2

对于Jquery Mobile 1.2.0

<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>

Answer 3

您需要将属性data-inline =“true”添加到输入元素。

Answer 4

CSS：

label {
   display: block;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    width: 212px; /* the width of twice your input (plus borders) */
}

你的HTML：

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

http://jsfiddle.net/ahallicks/BWsdk/

编辑：

抱歉，误读了你的问题！如果你想让他们在同一行开始使用以下CSS：

label {
    float: left;
    margin-right: 12px;
}
input {
    padding: 2px;
    width: 100px;
}
.wrap {
    float: left;
    width: 212px; /* the width of twice your input (plus borders) */
}

http://jsfiddle.net/ahallicks/E4EVT/

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

4 个答案: