在段落标签中将两个HTML表单保持在同一行

Question

我有一个段落，其中包含两个独立的表单。但是，当页面加载时，每个表单开始的地方会有一个换行符。我正在使用以下代码：

<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>

当它呈现在页面上时，有没有办法让这些内容保持在同一行上？

- James

Answer 1

将以下内容添加到你的CSS文件中：

form {
    display: inline-block; //Or display: inline; 
}

Fiddle: http://jsfiddle.net/trW82/

- Josh

Answer 2

将float样式添加到第一个表单 -

style="float: left;"

更好的做法是，创建一个独立的CSS类 -

.chatForm {
    float: left;
}

并将此类分配给第一个表单 -

<form class="chatForm" ......

你也可以将表单的display属性设置为inline或inline-block。

.chatForm, .declineForm {
    display: inline-block; /* or inline */
}

然后 -

<form class="chatForm" .....
<form class="declineForm" ....

演示.

请查看Sitepoint关于display和float的参考资料。

- MD Sayem Ahmed

---

HTML不需要“.”来表示它是一个类。 - Martin

Answer 3

这里之前的回答都没有指出您的HTML首先是无效的事实。根据HTML规范，<p>元素不能将<form>作为其内容的一部分。

但由于HTML很奇怪，仍然有一种方法可以在同一个（逻辑）段落中放置两个表单，即不将它们放在<p>中，而是放在<div>中，例如：

<div>
    <form style="display: inline;"><input type="submit" value="Submit 1"></form>
    <form style="display: inline;"><input type="submit" value="Submit 2"></form>
</div>

这是有效的HTML 根据Nu HTML Checker的检查结果。

这个解决方案不是很灵活，它只适用于表单直接在块元素内，比如 <div>，而且这个块元素也只能在其他块元素中使用。但据我所知，这是两个表单在同一段落中唯一（有效）的方法。

- rolve

Answer 4

给表单设置宽度（例如：style="width:300px"），然后将每个表单都包裹在一个 span 标签中。

<p>
    <span><form style="width:300px;" /></span>
    <span><form style="width:300px;" /></span>
</p>

如果失败了，您可以在表单上使用以下样式：

<p>
    <form style="width:300px; display:inline-block;" />
    <form style="width:300px; display:inline-block;" />
</p>

或者你可以尝试：

<p>
    <div style="width:300px; display:inline-block;"><form /></div>
    <div style="width:300px; display:inline-block;"><form /></div>
</p>

您可能还想将样式信息移动到CSS类定义中以保持一致性。

在HTML + CSS中，总有不止一种方法来完成任务。

祝您好运！

- Drew Anderson

---

根据HTML规范，<span>内部不应放置<form>标签，<p>内部也不应放置<div>标签。请查看我的回答... - rolve