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

Habe ich einen Absatz hat zwei getrennte Formen. Allerdings, wenn die Seite geladen ist, gibt es einen Zeilenumbruch, wo jede form beginnt. Ich bin mit dem folgenden 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>

Gibt es eine Möglichkeit, um diese alle auf der gleichen Linie, wenn es gerendert auf der Seite?

InformationsquelleAutor der Frage James | 2013-09-03

  1. 31

    Fügen Sie diese zu Ihrem css:

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

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

    InformationsquelleAutor der Antwort Flame Trap

  2. 4

    hinzufügen float Stil auf die erste form - 

    style="float: left;"

    besser noch, erstellen Sie eine separate CSS-Klasse - 

    .chatForm {
    float: left;
}

    und weisen Sie diese Klasse, um die erste form - 

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

    Können Sie auch festlegen display - Eigenschaft der form entweder inline oder inline-block - 

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

    und dann - 

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

    Demo.

    Check-out der sitepoint Referenz auf display und float.

    InformationsquelleAutor der Antwort MD Sayem Ahmed

  3. 0

    Geben den Formen eine Breite (z.B.: style="width:300px") und dann wickeln Sie die Formen in ein span-tag

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

    Andernfalls können Sie die folgende Vorlage verwenden, auf die form: 

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

    Können Sie auch wollen, bewegen Sie die style Angaben in eine CSS-Klasse definition für Konsistenz.

    Es gibt immer mehr als einen Weg, Dinge zu tun in HTML + CSS.

    Glück!

    InformationsquelleAutor der Antwort Drew Anderson

Schreibe einen Kommentar