Halten Sie zwei HTML-Formulare in der gleichen Zeile in einem Absatz-Tag

Question

Ich habe einen Absatz, der zwei getrennte Formen enthält. Wenn die Seite geladen wird, gibt es jedoch einen Zeilenumbruch, wo jedes Formular gestartet wird. Ich verwende den folgenden Code ein:

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

Gibt es eine Möglichkeit, dies alles auf der gleichen Linie zu halten, wenn es auf die Seite gerendert wird?

Answer 1

Fügen Sie diese in Ihrem CSS:

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

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

Answer 2

float Stil der ersten Form hinzufügen -

style="float: left;" 

noch besser, eine separate CSS-Klasse erstellen -

.chatForm { 
    float: left; 
} 

und diese Klasse der ersten Form zuweisen -

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

Sie können auch die Eigenschaft display beider Formulare entweder aufsetzenoder inline-block -

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

und dann -

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

Demo.

Überprüfen Sie die Website-Referenz auf display und float.

Answer 3

Geben Sie die Formen eine Breite (dh: style = "width: 300px") und dann jede der Formen in einer Spanne wickeln TAG

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

Failing, dass Sie die folgende Art auf dem Formular verwenden können:

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

Oder Sie könnten versuchen:

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

Sie können auch die Art von Informationen in einer CSS-Klassendefinition für Konsistenz zu bewegen.

Es gibt immer mehr als eine Möglichkeit, Dinge in HTML + CSS zu tun.

Viel Glück!