在段落标记中将两个 HTML 表单保持在同一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18587588/
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
Keep two HTML forms on the same line in a paragraph tag
提问by James
I have a paragraph which has two seperate forms in it. However, when the page is loaded, there is a line break where each form starts. I am using the following code:
我有一个段落，其中有两个单独的形式。但是，当页面加载时，每个表单开始处都有一个换行符。我正在使用以下代码：
<p style="font-size:14px;font-weight:700;color:grey;">' . $user_pic . ' <a href="profile.php?id=' . $mem_id . '" style="color:#0F39C5;">' . $knockfirst . ' ' . $knocklast . '</a> is knocking. Let him in?
<form action="messages/group/addToChat.php" method="post" name="adduser"><input type="hidden" id="newid" name="newid" value="' . $mem_id . '"><input type="hidden" id="groupid" name="groupid" value="' . $group_id . '"><a href="#" onclick="$(this).closest(\'form\').submit(); return false;" style="color:#0F39C5;font-size:15px;">Yes</a></form>
<form action="messages/group/declineKnock.php" method="post" name="declineuser"><input type="hidden" id="newid" name="newid" value="' . $mem_id . '"><input type="hidden" id="groupid" name="groupid" value="' . $group_id . '"> |
<a href="#" onclick="$(this).closest(\'form\').submit(); return false;" style="color:#0F39C5;font-size:15px;">No</a></form></p>
Is there any way to keep this all on the same line when it's rendered onto the page?
当它呈现到页面上时，有什么方法可以将它们保持在同一行上？
回答by Flame Trap
Add this to your css:
将此添加到您的CSS：
form {
display: inline-block; //Or display: inline;
}
Fiddle: http://jsfiddle.net/trW82/
回答by MD Sayem Ahmed
add floatstyle to the first form -
float为第一个表单添加样式 -
style="float: left;"
better yet, create a separate CSS class -
更好的是，创建一个单独的 CSS 类 -
.chatForm {
float: left;
}
and assign this class to the first form -
并将此类分配给第一种形式 -
<form class="chatForm" ......
You can also set displayproperty of both form to either inlineor inline-block-
您还可以将display两种形式的属性设置为inline或inline-block-
.chatForm, .declineForm {
display: inline-block; /* or inline */
}
and then -
进而 -
<form class="chatForm" .....
<form class="declineForm" ....
Demo.
演示。
回答by Drew Anderson
Give the forms a width (ie: style="width:300px") and then wrap each of the forms in a span tag
给表单一个宽度（即：style="width:300px"），然后将每个表单包装在一个 span 标签中
<p>
<span><form style="width:300px;" /></span>
<span><form style="width:300px;" /></span>
</p>
Failing that you can use the following style on the form:
如果失败，您可以在表单上使用以下样式：
<p>
<form style="width:300px; display:inline-block;" />
<form style="width:300px; display:inline-block;" />
</p>
Or you could try:
或者你可以试试：
<p>
<div style="width:300px; display:inline-block;"><form /></div>
<div style="width:300px; display:inline-block;"><form /></div>
</p>
You may also want to move the style information into a CSS class definition for consistency.
您可能还想将样式信息移动到 CSS 类定义中以保持一致性。
There's always more than one way of doing things in HTML + CSS.
在 HTML + CSS 中做事的方式总是不止一种。
Good luck!
祝你好运！
