Храните две HTML-формы в одной строке в теге абзаца

У меня есть параграф, в котором есть две отдельные формы. Однако, когда страница загружается, происходит разрыв строки, где начинается каждая форма. Я использую следующий код:

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

Есть ли способ сохранить все это в одной строке при отображении на странице?

Ответ 1

Добавьте это в свой css:

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

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

Ответ 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" ....

Демо.

Проверьте ссылку на сайт на дисплей и поплавок.

Ответ 3

Дайте формам ширину (то есть: style = "width: 300px" ), а затем оберните каждую из форм в теге 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 всегда существует более одного способа делать вещи.

Удачи!