JQuery Mobile - 内联显示 HTML 表单答案

【问题标题】：JQuery Mobile - Display An HTML Form InlineJQuery Mobile - 内联显示 HTML 表单
【发布时间】：2011-12-22 15:49:30
【问题描述】：

目标：在 Jquery Mobile 的同一行显示文本框和提交按钮。

问题：它们不会显示在同一行。

我曾多次尝试在同一行显示文本框和提交按钮，但始终无法正常工作。这是我的代码和我使用的组合...

<form method="GET" style="display: inline-block;">
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
</form>

那没用。

<form method="GET">
   <span>
     <input type="text" name="id" value="Other">
     <input type="submit" data-type="button" data-icon="plus" value="Add">
   </span>
</form>

也没有这样做。

<form method="GET">
      <ul style="display: inline; list-style-type: none;">
          <li style="display: inline;"><input type="text" name="id" value="Other"></li>
          <li style="display: inline;"><input type="submit" data-type="button" value="Add"></li>
       </ul>
</form>

我做错了什么以及如何实现我的目标？

谢谢，圣诞快乐！

【问题讨论】：

标签： jquery html forms jquery-mobile html-lists

【解决方案1】：

网格布局有用吗？

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

HTML：

<fieldset class="ui-grid-a">
    <div class="ui-block-a">
            <input type="text" name="id" value="Other">
    </div>
    <div class="ui-block-b">
            <input type="submit" data-type="button" data-icon="plus" value="Add">
    </div>
</fieldset>

【讨论】：

网格似乎强制网格中所有项目的大小相同。如果我想让我的输入框占据 75% 的空间，而旁边的按钮占据 25% 的空间呢？
跨度>
你也可以使用 ui-field-contain:
标签和输入。

【解决方案2】：

您可以使用媒体查询将按钮与文本输入内联显示以获得更大的屏幕宽度，并在提交按钮上显示文本框以获得更小的屏幕宽度：

form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;
}
@media all and (max-width:480px) {
    form .ui-input-text {
        width   : 100%;
    }
    form > .ui-btn {
        width   : 100%;
    }
}

这是一个演示：http://jsfiddle.net/fmJGR/

我正在使用 jQuery Mobile 添加的类来定位元素，这对于使用提交按钮特别有用，因为它是 jQuery Mobile 初始化后的 HTML 结构，它与每个初始化的元素不同。

这是提交按钮的 HTML 在 jQuery Mobile 初始化后变成的样子：

<div data-theme="c" class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-c" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
        <span class="ui-btn-text">Add</span>
        <span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
    </span>
    <input type="submit" value="Add" data-icon="plus" data-type="button" class="ui-btn-hidden" aria-disabled="false">
</div>

如果您希望支持 IE7，则需要添加以下代码，因为 IE7 不理解 display : inline-block：

form .ui-input-text {
    display : inline-block;
    width   : 65%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}
form > .ui-btn {
    display : inline-block;
    width   : 25%;
    vertical-align : middle;

    /*Fix for IE7*/
    *display : inline;
    zoom     : 1;
}

【讨论】：

【解决方案3】：

将它们添加到一行 HTML 表格中的两个单独的列中也可以。

【讨论】：