Giữ hai biểu mẫu HTML trên cùng một dòng trong thẻ đoạn

Question

Tôi có một đoạn có hai hình thức riêng biệt trong đó. Tuy nhiên, khi trang được tải, có một ngắt dòng trong đó mỗi biểu mẫu bắt đầu. Tôi đang sử dụng mã sau:

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

Có cách nào để giữ tất cả trên cùng một dòng khi được hiển thị trên trang không?

Answer 1

Thêm phần này vào css của bạn:

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

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

Answer 2

thêm float kiểu mẫu đầu tiên -

style="float: left;" 

tốt hơn, tạo ra một lớp CSS riêng biệt -

.chatForm { 
    float: left; 
} 

và gán lớp này sang hình thức đầu tiên -

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

Bạn cũng có thể đặt thuộc tính display của cả hai hình thức thành inline hoặc inline-block -

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

và sau đó -

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

Demo.

Kiểm tra tham chiếu vị trí trên display và float.

Answer 3

Cho các hình thức có chiều rộng (ví dụ: style = "width: 300px") và sau đó quấn mỗi trong những hình thức trong một khoảng thời Tag

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

Không mà bạn có thể sử dụng phong cách sau đây về hình thức:

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

Hoặc bạn có thể thử:

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

Bạn cũng có thể muốn chuyển thông tin phong cách vào một định nghĩa lớp CSS cho nhất quán.

Luôn có nhiều cách để thực hiện mọi việc trong HTML + CSS.

Chúc may mắn!