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

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

6 78
html css

6 ответов:

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

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

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

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

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

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

19

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

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

6

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

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

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

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