18

2 つの別個のフォームを含む段落があります。ただし、ページが読み込まれると、各フォームの開始位置で改行が発生します。次のコードを使用しています。

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

ページにレンダリングするときに、これをすべて同じ行に保持する方法はありますか?

4

4 に答える 4

35

これを css に追加します。

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

フィドル: http://jsfiddle.net/trW82/

于 2013-09-03T08:38:17.287 に答える
5

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

デモ。

displayとfloatの sitepoint リファレンスを確認してください。

于 2013-09-03T08:36:46.887 に答える
0

フォームに幅を指定し (例: 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 で物事を行うには、常に複数の方法があります。

幸運を！

于 2013-09-03T09:03:25.747 に答える