Keep two HTML forms on the same line in a paragraph tag

Question

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?

Answer 1

Add this to your css:

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

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

Answer 2

add float style to the first form -

style="float: left;"

better yet, create a separate CSS class -

.chatForm {
    float: left;
}

and assign this class to the first form -

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

You can also set display property of both form to either inline or inline-block -

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

and then -

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

Demo.

Check out the sitepoint reference on display and float.