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>

当它被渲染到页面上时，有没有办法将这一切保持在同一行？

Answer 1

将此添加到您的css：

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

小提琴：http://jsfiddle.net/trW82/

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

Demo

查看display和float上的sitepoint参考。

Answer 3

为表单指定宽度（即：style =＆＃34; width：300px＆＃34;）然后将每个表单包装在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中，总有不止一种做事方式。

祝你好运！

Answer 4

这里以前的答案都没有指出您的 HTML 首先无效的事实。根据 HTML spec，<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 according to Nu HTML Checker。

此解决方案不是很灵活，因为它仅在表单直接位于块元素（例如 <div>）内部时才有效，而块元素又只能位于其他块元素内部。但据我所知，这是两种形式可以在同一段落中的唯一（有效）方式。

将两个HTML表单保留在段落标记的同一行中

4 个答案: