将两个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>

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

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

演示。

查看display和float上的 sitepoint 参考。