Làm cách nào để hiển thị HTML <FORM> dưới dạng phần tử nội tuyến?

Đây có lẽ là một câu hỏi html / css cơ bản ...

Tôi có một biểu mẫu một nút đơn giản mà tôi muốn hiển thị nội dòng bên trong văn bản đoạn văn.

<p>Read this sentence 
     <form style='display:inline;'>
     <input style='display:inline;' 
            type='submit' 
            value='or push this button'/>
     </form>.
</p>

Mặc dù biểu mẫu có thuộc tính style = display: inline, tôi vẫn nhận được dấu ngắt dòng trước biểu mẫu. Có cách nào để thoát khỏi nó?

Các phần tử biểu mẫu có thể xuất hiện bên trong <p>không?

Di chuyển thẻ biểu mẫu của bạn ngay bên ngoài đoạn văn và đặt lề / đệm thành 0:

<form style="margin: 0; padding: 0;">
  <p>
    Read this sentence 
    <input style="display: inline;" type="submit" value="or push this button" />
  </p>
</form>

<form>không thể vào trong <p>, không. Trình duyệt sẽ đột ngột đóng <p>phần tử của bạn khi nó chạm vào <form>thẻ mở vì nó cố gắng xử lý những gì nó cho là một phần tử đoạn chưa được đóng:

<p>Read this sentence 
 </p><form style='display:inline;'>

Bạn có thể thử mã này:

<form action="#" method="get" id="login" style=" display:inline!important;">

  <label for='User'>User:</label> 
  <input type='text' name='User' id='User'>

  <label for='password'>Password:</label><input type='password' name='password' id='password'>
  <input type="submit" name="log" id="log" class="botton" value="Login" />

</form> 

Điều quan trọng cần lưu ý là thuộc tính style css trong <form>thẻ.

display:inline!important;

Theo thông số kỹ thuật HTML, cả hai <form>và <p>đều là các phần tử khối và bạn không thể lồng chúng. Có thể thay thế <p>bằng <span>sẽ phù hợp với bạn?

CHỈNH SỬA: Xin lỗi. Tôi đã nhanh chóng trong từ ngữ của tôi. Phần <p>tử không cho phép bất kỳ nội dung khối nào bên trong - như được chỉ định bởi thông số kỹ thuật HTML cho các đoạn văn .

Tôi nghĩ rằng bạn có thể đạt được những gì bạn muốn, chỉ đơn giản bằng cách bao gồm nút gửi trong đoạn văn:

     <pre>
     <p>Read this sentence  <input  type='submit' value='or push this button'/></p>
     </pre>   

Chỉ cần sử dụng kiểu theo cách float: leftnày:

<p style="float: left"> Lorem Ipsum </p> 
<form style="float: left">
   <input  type='submit'/>
</form>
<p style="float: left"> Lorem Ipsum </p>

Thêm một trình bao bọc nội tuyến.

<div style='display:flex'>
<form>
 <p>Read this sentence</p>
 <input type='submit' value='or push this button' />
</form>
<div>
    <p>Message here</p>
</div>