Zachowaj dwa formularze HTML w tym samym wierszu w znaczniku akapitu

Question

Mam akapit, który zawiera dwie oddzielne formularze. Jednak po załadowaniu strony istnieje podział wiersza, w którym rozpoczyna się każdy formularz. Używam następujący kod:

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

Czy istnieje jakiś sposób, aby utrzymać to wszystko w tym samym wierszu, gdy jest renderowane na stronie?

Answer 1

Dodaj to do Twojego CSS:

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

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

Answer 2

dodać float styl do pierwszej postaci -

style="float: left;" 

jeszcze lepiej, utworzyć oddzielną klasę CSS -

.chatForm { 
    float: left; 
} 

i przypisać tej klasy do pierwszej postaci -

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

Można także ustawić właściwość display obu formularzy na inline lub inline-block -

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

a następnie -

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

Demo.

Sprawdź numer referencyjny sitepoint na display i float.

Answer 3

Daj form szerokość (tj: style = "width: 300px"), a następnie owinąć każdej z form w rozpiętości tag

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

przeciwnym razie można użyć poniższy styl na formularzu:

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

Albo można spróbować:

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

Można też przenieść informacje o stylu w definicji klasy CSS dla spójności.

Zawsze istnieje więcej niż jeden sposób robienia rzeczy w HTML + CSS.

Powodzenia!