Jak wyświetlić HTML <FORM> jako element śródliniowy?

Question

To prawdopodobnie podstawowe pytanie html/css ...

Mam prosty formularz jednoprzyciskowy, który chciałbym wyświetlić w tekście wewnątrz akapitu.

<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, otrzymam linebreak przed formularzem. Czy istnieje sposób, aby się go pozbyć?

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

Answer 1

Przesuń znacznik formularz obrzeżach akapitu i ustawić marginesy/wyściółka do zera:

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

Answer 2

<form> nie może wejść do wnętrza <p>, nie. Przeglądarka będzie nagle zamknąć elementu <p> gdy trafi otwarcie <form> tag jak to próbuje obsłużyć co uzna to unclosed ustęp elementem:

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

Answer 3

Według HTML spec zarówno <form> i <p> są elementy blokowe i im nie można zagnieżdżać. Może zastąpienie <p> z <span> będzie działać dla Ciebie?

EDYCJA: EDYT. Byłem szybki w swoim brzmieniu. Element <p> nie zezwala na zawartość bloku w obrębie - jak określono przez HTML spec for paragraphs.

Answer 4

Można spró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żne jest, aby pamiętać, jest własnością styl css w tagu <form>.

display:inline!important;

Answer 5

Można osiągnąć to, co chcesz, jak sądzę, po prostu przez włączenie przycisku przedstawienia w akapicie:

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

Answer 6

Wystarczy użyć stylu float: left w 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>