JQuery Mobile - 内联显示 HTML 表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8606298/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile - Display An HTML Form Inline
提问by Nick Chubb
Goal:Display textbox and submit button on the same line in Jquery Mobile.
目标：在 Jquery Mobile 的同一行显示文本框和提交按钮。
Problem:They will not display on the same line.
问题：它们不会显示在同一行上。
I've tried many times to display the textbox and submit button on the same line, but it never works. Here is my code and the combinations I used...
我试过很多次在同一行显示文本框和提交按钮，但它从来没有工作。这是我的代码和我使用的组合...
<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>
That did not work.
那没有用。
<form method="GET">
<span>
<input type="text" name="id" value="Other">
<input type="submit" data-type="button" data-icon="plus" value="Add">
</span>
</form>
Neither did this.
这也没有。
<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>
What am I doing wrong and how can I achieve my goal?
我做错了什么，我怎样才能实现我的目标？
Thanks and merry Christmas!
谢谢，圣诞快乐！
回答by Phill Pafford
Would a Grid Layout work?
网格布局会起作用吗？
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>
回答by Jasper
You can use a media query to show the button inline with the text input for larger screen widths and show the text-box over the submit button for smaller screen widths:
您可以使用媒体查询在较大屏幕宽度下显示与文本输入内联的按钮，并在较小屏幕宽度下在提交按钮上显示文本框：
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%;
}
}
Here is a demo: http://jsfiddle.net/fmJGR/
这是一个演示：http: //jsfiddle.net/fmJGR/
I am using the classes added by jQuery Mobile to target the elements, this is especially useful for working with the submit button since it's HTML structure after jQuery Mobile initializes it does not resemble the per-initialized element.
我正在使用 jQuery Mobile 添加的类来定位元素，这对于使用提交按钮特别有用，因为它是 jQuery Mobile 初始化后的 HTML 结构，它与每个初始化的元素不同。
Here is what the submit button's HTML turns into after jQuery Mobile initializes it:
下面是提交按钮的 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>
If you wish to support IE7 you will need to add the following code because IE7 doesn't understand display : inline-block:
如果您希望支持 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;
}
回答by Harsha
Add them into two separate columns within a row of HTML table also works.
将它们添加到一行 HTML 表中的两个单独的列中也有效。
