Положить внутрь-это добавить дополнительный [дубликат]

этот вопрос уже есть ответ здесь:

  • почему тег

    не может содержать тег

    внутри? 5 ответов

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

    в HTML 4 элемент DIV не может находиться внутри другого элемента уровня блока, например элемента P. Однако в HTML5 элемент DIV можно найти внутри и может содержать другие элементы содержимого потока, такие как P и DIV.

    у меня есть что-то вроде этого внутри формы

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

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

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

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

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

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

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

    Почему?

    обновление: я написала автору статьи и она внесла соответствующие изменения.

4 54
html html5

4 ответа:

С мелкий спецификация:

п – пункт

[...]

разрешено содержание

формулировка содержания

а это что такое формулировка содержания? формулировка содержания:

состоит из элементы фразировки перемежаемых нормальный характер данные.

обычные символьные данные это просто: немаркированный текст. элементы фразировки являются:

a или ЭМ или сильный ... [куча других элементов, ни один из которых являются div]

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

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

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

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

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

100

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

как уже было сказано, не разрешается помещать элементы блока внутри P-тега. Однако, на практике, на самом деле это не совсем верно. Фактическое значение отображения на самом деле совершенно не имеет значения; единственное, что считается, это то, что по умолчанию значение дисплея для бирки, например "блока" для ДИВС и "инлайн" для перегонов. Изменение значения отображения все равно заставит браузер преждевременно закрыть P-тег.

однако, это также работает наоборот. Вы можете создать стиль span-tag, чтобы вести себя точно так же, как div-tag, но он все равно будет принят в среде 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>

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

13

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

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

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

7

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

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

0