Как отобразить HTML <FORM>как встроенный элемент?

Question

Это, вероятно, основной вопрос HTML / CSS ...

У меня есть простая однокнопочная форма, которую я хотел бы отображать внутри текста абзаца.

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

Даже если у формы есть атрибут style = display: inline, перед формой я вижу разрыв строки. Есть ли способ избавиться от этого?

Могут ли элементы формы появляться внутри <p>?

Answer 1

Переместите тег формы за пределы абзаца и установите поля / отступы на ноль:

<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> не может войти внутрь <p>, нет. Браузер собирается внезапно закрыть ваш элемент <p>, когда он нажмет на открывающий тег <form>, когда он попытается обработать то, что он считает незамкнутым элементом абзаца:

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

Answer 3

Вы можете попробовать этот код:

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

Важно отметить свойство стиля css в теге <form>.

display:inline!important;

Answer 4

Согласно HTML-спецификации и <form>, и <p> являются блочными элементами, и вы не можете их вкладывать. Может быть, замена <p> на <span> подойдет вам?

EDIT: Сожалею. Я был быстр в моей формулировке. Элемент <p> не допускает никакого содержимого блока внутри - как указано в HTML-спецификации для абзацев .

Answer 5

Просто используйте стиль float: left таким образом:

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

Answer 6

Я думаю, что вы можете достичь желаемого, просто включив кнопку отправки в абзац:

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