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

Вероятно, это основной вопрос 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>?

 Evgeny10 июл. 2009 г., 00:43
Спасибо всем за ответы и комментарии!

Ответы на вопрос(6)

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

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

 31 окт. 2013 г., 06:33
это единственный ответ здесь, который работает!
Решение Вопроса

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

<form style="margin: 0; padding: 0;">
  <p>
    Read this sentence 
    <input style="display: inline;" type="submit" value="or push this button" />
  </p>
</form>
 14 дек. 2013 г., 18:36
Ваш ответ спас мой день.
 28 дек. 2014 г., 04:13
дисплей: встроенный сделал это для меня тоже. Почему бы не добавить это к стилю формы в вашем ответе.
 03 янв. 2014 г., 12:29
Маржа и заполнение в моей форме не работали, я должен был использовать display: вместо этого встроенный, а затем отступ / отступ не был необходим.
 05 янв. 2016 г., 22:19
спас меня тоже! Боже, 2 часа впустую, и все, что мне нужно было сделать, это переместить абзацы за пределы ввода. Я хотел бы знать, почему это работает, но, слава богу, это работает.

Просто используйте стильfloat: left в этом случае:

<p style="float: left"> Lorem Ipsum </p> 
<form style="float: left">
   <input  type='submit'/>
</form>
<p style="float: left"> Lorem Ipsum </p>
 21 сент. 2012 г., 19:34
Лучше исправить разметку, как это предлагается в других ответах, чем делатьfloat трюки.

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

РЕДАКТИРОВАТЬ: Сожалею. Я был быстр в моей формулировке.<p> элемент не допускает никакого содержимого блока в пределах - как указаноHTML спецификация для абзацев.

 10 июл. 2009 г., 00:41
Некоторые блочные элементы могут быть вложенными (например, элементы div), но некоторые являются специальными и не должны быть вложенными. Например, тег абзаца может содержать только встроенные элементы.

<form> не могу зайти внутрь<p>нет Браузер резко закроет ваш<p> элемент, когда он попадает в отверстие<form> тег, поскольку он пытается обработать то, что он считает незакрытым элементом абзаца:

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

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

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

Ваш ответ на вопрос