Ввод <div> внутри <p> добавляет дополнительный <p> [Дубликат]

This question already has an answer here:

Why <p> tag can't contain <div> tag inside it? 5 answers

Отhttp://webdesign.about.com/od/htmltags/p/aadivtag.htm

In HTML 4, the DIV element cannot be inside another block-level element, like a P element. However, in HTML5 the DIV element can be found inside and can contain other flow content elements, like P and DIV.

У меня есть что-то подобное внутри формы

<p> <label...> <input...> </p>

но когда Rails автоматически генерирует div error_explanation, оборачивая ввод, один абзац превращается в два, и я вижу это в Firebug:

<p> <label...> </p> <div...> <input...> </div> <p> </p>

Кроме того, если я просто добавлю простой

<p> <div> test </div> </p>

такая же проблема возникает (JSFiddle) и он отображается в DOM как

<p> </p> <div> test </div> <p> </p>

Зачем?

Update: Я написал автору статьи по электронной почте, и она внесла соответствующие изменения.

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

я решил поделиться своим решением этой проблемы, чтобы помочь другим людям, которые могут наткнуться на эту страницу в Google.

Как уже было сказано, запрещается помещать блочные элементы внутри p-тега. Однако на практике это не совсем так. Фактическое отображаемое значение фактически не имеет значения; единственное, что считается, это то, чтоdefault отображаемое значение для тега, например, & Quot; блок & Quot; для div'ов и & quot; inline & quot; для пролетов. Изменение значения дисплея все равно заставит браузер преждевременно закрыть p-тег.

Тем не менее, это также работает наоборот. Вы можете настроить тег span таким образом, чтобы он вел себя точно так же, как тег div, но он все равно будет принят в среде p.

Поэтому вместо того, чтобы делать это:

<p>
   <div>test</div>
</p>

Вы можете сделать это:

<p>
   <span style="display:block">test</span>
</p>

Просто помните, что браузер рекурсивно проверяет содержимое среды p, поэтому даже что-то вроде этого:

<p>
   <span style="display:block">
       <div>test</div>
   </span>
</p>

Результатом будет следующее:

<p>
   <span style="display:block"></span>
</p>
<div>test</div>
<p>
</p>

Надеюсь, это поможет кому-то там :)

 20 окт. 2014 г., 13:57
Ты говоришь<p><span>...</span></p> все еще технически недопустимый HTML, но это не так.<span> является формулирующим элементом, который разрешен внутри<p> и изменение его отображаемого значения не делает HTML недействительным.Here's another article which discusses this
 14 февр. 2015 г., 18:35
Настройкаspan вdisplay:block и положить его вp вполне может быть однотипным способом использования HTML / CSS (хотя Юкка делает интригующий случай вstackoverflow.com/a/18933182/1709587 почему иногда это может быть оправдано). Это, однако, полностью действительный HTML. Когда в спецификации HTML говорится об элементах & apos; разрешенный контент, он заботится только о типах тегов, а не об их стиле.
Решение Вопроса

прекрасная спецификация:

p – paragraph

[...]

Permitted contents

Phrasing content

И что этоPhrasing content? Фразированное содержание:

Consists of phrasing elements intermixed with normal character data.

Normal character data это просто текст без опознавательных знаков.Phrasing elements являются:

a or em or strong ... [a bunch of other elements none of which are div]

Так,<p><div></div></p> недопустимый HTML. В соответствии с правилами пропуска тегов, перечисленными в спецификации,<p> тег автоматически закрывается<div> тег, который оставляет</p> тег без соответствия<p>, Браузер вполне может попытаться исправить его, добавив открытый<p> тег после<div>:

<p></p><div></div><p></p>

Вы не можете поставить<div> внутри<p> и получать согласованные результаты из разных браузеров. Предоставьте браузерам правильный HTML, и они будут вести себя лучше.

Вы можете положить<div> внутри<div> хотя, если вы замените<p> с<div class="p"> и стилизовать его соответствующим образом, вы можете получить то, что вы хотите.

Ваша ссылка на about.com не соответствует спецификации на w3.org, ваша ссылка вводит вас в заблуждение.

 Steve26 мая 2012 г., 23:47
Понял спасибо
 06 мар. 2015 г., 04:23
Обратите внимание, что HTML5 такжеrequires поведение</p> конечный тег, приводящий к пустому абзацу (хотя он, вероятно, делает это только в результате существующего взаимодействия с браузером). Увидетьstackoverflow.com/questions/11570902/…
 Steve26 мая 2012 г., 10:14
Как насчет бр тегов? Считается ли лучшей практикой использовать DIV?
 20 мар. 2015 г., 06:52
@BoltClock: Марк Эмери добавил «В соответствии с правилами пропуска тегов, перечисленными в спецификации,<p> тег автоматически закрывается<div> тег, который оставляет</p> тег без соответствия<p>& Quot; примечание, нам нужно больше разъяснений? Может быть, весь этот абзац может использовать переписать.
 26 мая 2012 г., 19:20
@Steve: зависит от обстоятельств. Я бы использовал контейнер для группировки элементов и<br> когда мне нужен разрыв строки в группе.

<div> элемент внутри<p> в DOM, потому что открытие<div> тег автоматически закроет<p> элемент.

<P> не допустит другой элемент внутри него. только<span> а также<strong> элемент разрешен<p></p> мы можем добавить только текстовые теги. перейдите по этой ссылке, чтобы узнать больше

они, вероятно, неправильно поняли проекты HTML5. Разрешение DIV внутри P вызовет большую путаницу; Я не думаю, что это когда-либо рассматривалось при разработке HTML5.

Если вы попытаетесь использовать DIV внутри P, начальный тег DIV неявно закроет элемент P. Это, вероятно, объясняет то, что вы видели.

Чтобы избежать этой проблемы, не используйте P, если содержимое содержит или может содержать элемент DIV. Вместо этого используйте DIV.

 Steve26 мая 2012 г., 23:47
Понял спасибо
 26 мая 2012 г., 13:30
@ Стив, да, как насчетbr теги? Если вы имеете в виду, могут ли они появляться внутриp элемент, то да, они могут. Практическая проблема сbr является то, что это не превращает линию вelement, делая стилизацию и скриптинг потенциально проблематичным.
 Steve26 мая 2012 г., 10:13
Как насчет бр тегов? Считается ли лучшей практикой использовать DIV?

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