Jak wyświetlić HTML <FORM> jako element wbudowany?

To prawdopodobnie podstawowe pytanie html / css ...

Mam prosty formularz jednoprzyciskowy, który chciałbym wyświetlić w tekście akapitowym.

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

Mimo że formularz ma atrybut style = display: inline, przed formularzem pojawia się podział wiersza. Czy jest sposób, aby się go pozbyć?

Czy elementy formy mogą pojawić się wewnątrz <p>?

Przenieś swój znacznik formularza poza akapit i ustaw marginesy / dopełnienie na zero:

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

<form>nie mogę wejść do środka <p>, nie. Przeglądarka nagle zamknie Twój <p>element, gdy trafi w otwierający <form>znacznik, próbując obsłużyć to, co uważa za niezamknięty element akapitu:

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

Możesz wypróbować ten kod:

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

Ważną rzeczą, na którą należy zwrócić uwagę, jest właściwość stylu css w <form>tagu.

display:inline!important;

Według HTML wyspecjalizoway obu <form>i <p>są elementy blokowe i im nie można zagnieżdżać. Może zastępując <p>ze <span>będzie pracować dla Ciebie?

EDYCJA: Przepraszamy. Byłem zbyt szybki w sformułowaniu. <p>Elementu nie pozwala na zawartość bloków w - określony przez HTML spec ust .

Myślę, że możesz osiągnąć to, co chcesz, po prostu umieszczając przycisk przesyłania w akapicie:

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

Po prostu użyj stylu float: leftw ten sposób:

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

Dodaj otokę wbudowaną.

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