Как использовать тег <h2></h2> внутри <p></p> в середине текста?

Я хочу сделать что-то вроде этого:

<p>This is a <h2>text</h2> paragraph.</p>

Я отключил поле и добавление для h2, но он все еще разбивает строку до и после тега h2. Как я могу использовать тег h2 в середине текста и сделать его похожим, если это нормальное слово, как и <b> делает?

Допитом моего html-документа является "XHTML 1.0 Transitional"

Ответы

Ответ 1

Не рекомендуется использовать тег, который означает "заголовок" в тексте тела. Тегами <h..> являются логические теги; их использование придает смысл прилагаемому тексту, а именно, что текст является заголовком раздела.

Хотя вы можете использовать атрибут display: inline, подумайте об использовании более подходящего тега или даже тега <span>.

Ответ 2

Недопустимо иметь h2 внутри p.

Помимо этого и для ответа на ваш вопрос, h2 является элементом уровня block. Создание элемента уровня inline приведет к тому, что он будет вести себя аналогично тому, как вы описываете действующий тег b.

p h2{display:inline}

Как я уже сказал выше, HTML, который вы указали, недействителен.

Ответ 3

Не надо, все дело в том, что это заголовок. Заголовки находятся на одной линии. Вместо этого используйте CSS. Скажите текст, а затем в файле CSS, выберите размер шрифта.

Ответ 4

Вам нужно сделать это

display:inline;

h2 является блочным элементом.

Тег h2 помещает заголовок, который по определению не является частью текста. Так что вы делаете, вероятно, не самый лучший способ. Подумайте об этом по-другому.

Ответ 5

Создайте класс как .myH2 (не лучшее имя) с тем же кодом h2 и используйте span в p как

<p>this is <span class="myH2">myH2</span>.</p>

Ответ 6

Несмотря на неправильное использование тега <h2> внутри абзаца, мы можем создать стиль <h2>, чтобы держать его в абзаце. Я протестировал один из вышеперечисленных трюков CSS в Firefox и Chrome следующим образом:

HTML-код <p>One paragraph with <h2>title text</h2> in the middle</p>

CSS трюк p h2{display:inline}

НО он не получит ожидаемого результата. Браузер усекает абзац прямо перед исходным тегом h2. Посмотрите DOM из Firebug:

enter image description here

Поэтому трюк CSS p h2{display:inline} работает некорректно, потому что правило CSS неверно, т.е. тег <h2> находится не внутри тега <p>. Это выглядит так:

enter image description here

Добавление трюка CSS только для тега <h2> h2{display:inline} не является окончательным решением. Он будет выглядеть следующим образом:

enter image description here

Окончательный вариант:

HTML-код <p class="inline-object">One paragraph with <h2 class="inline-object">title text</h2> in the middle</p>

CSS трюк .inline-object" {display:inline}

Это будет выглядеть так, как мы ожидаем:

enter image description here

Если вы пытаетесь замаскировать текст заголовка <h2> как обычный текст, просто добавьте еще два правила в класс .inline-object" {display:inline;font-size: inherit;font-weight: normal;}

Ответ 7

Firefox вырезает мой P из-за H2 внутри него. А затем создав P для

(пустой абзац). И это хорошо. Поскольку он автоматически генерируется, и для очистки тэгов P мне нужно написать десятки PHP-кода.