如何使用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>

这个可以实现。只要在电脑浏览器中全屏查看，标签、输入框和按钮都会在同一行显示。但是如果我们缩小窗口，三个元素将分别显示在一行上。有没有办法让标签显示在一行上，而将输入框和按钮显示在下一行？

- Naning

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

- Phill Pafford

---

看这个例子：http://jsfiddle.net/E4EVT/31/ 这就是我想要的最终结果。当窗口很大时，使用第一个；当窗口很小时，使用第二个。 - Naning

更新了我的回答，请查看网格布局选项：http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html - Phill Pafford

是的，gridlayout 做了我想要的事情，但它也意味着输入字段+按钮与同一表单中的其他输入字段不对齐。这使得它看起来有点丑陋 :/ 也许现在是时候认识到 jQM 在设计方面很难搞了。 - Naning

你也可以使用表格布局：http://jquerymobile.com/demos/1.0rc1/docs/content/content-html.html（查看源代码），但 jQM 中自定义布局有些具有挑战性的原因是他们希望在多种设备上提供相同的外观和感觉，因此自定义代码在其他设备上看起来也会不同。 - Phill Pafford

我最终“解决”它的方法是这样的：http://jsfiddle.net/E4EVT/45/ 感谢您的帮助。如果没有您，可能无法到达那里。 - Naning

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>

- Gabriel Diaz

Answer 3

你需要在输入元素中添加属性data-inline="true"。

- Sridhar

---

可以尝试将它们放在span标签中。 - ghostCoder

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/

- Alex

---

不幸的是，这个方法行不通。由于我正在使用JQuery Mobile，JQuery Mobile css仍然会“施展其魔力”，将每个元素放在一行上。我希望它可以简单地调整文本输入框的大小，以便按钮可以放在旁边。 - Naning