<h1>, <h2>, <h3> ... теги, встроенные в абзацы (<p>) - PullRequest
20 голосов
/ 04 февраля 2010

Я пытаюсь добавить теги <hx> в абзацы, например:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pulvinar tincidunt neque, at blandit leo mattis vitae. Cras <h2>placerat</h2> justo vel risus porta cursus. Nullam eget sem nibh. Sed <h3>mattis</h3> facilisis rhoncus. Morbi sit amet nisl lectus.</p>

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

h1, h2, h3, h4, h5, h6 {
display:inline !important;
text-transform:none;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
clear:none;
color:inherit;
margin:0;
padding:0;
}

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

Lorem ipsum dolor sit amet, Concectetur Adipiscing Elit. Aliquam pulvinar tincidunt neque, в blandit Leo Mattis Vitae. Крас

placerat justo vel risus porta cursus. Nullam Eget Sem Nibh. Сед

Mattis Facilisis Rhoncus. Морби сидеть Amet Nisl Lectus.

Спасибо

PS: Кстати, я использую тему фреймворка для Drupal.

Ответы [ 6 ]

28 голосов
/ 04 февраля 2010

Вы неправильно используете теги заголовка .

Вы должны использовать <span> теги с классами CSS.

Я попробовал , и в результате Firefox видит недопустимый тег <h1> внутри <p>, автоматически закрывает тег <p>. Вы можете ясно видеть это в Firebug.

11 голосов
/ 20 февраля 2013

Просто поместите тег h2 в начало абзаца. Например, <p>The p tags are automatically breaking as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p> - это параметр, и мы хотим автоматически взломать тег h1.

<p><h2></h2>The p tags are <h1>automatically breaking</h1> as soon as the html parser reaches the hx tags. if you really want to do this you must close the p tag before the hx tag. then set p and hx to display inline!</p>

но мы не можем добиться стиля, который мы задали тегу p, так как тег p автоматически разрывается.

Примечание: тег h1 должен иметь стиль

h1{ display:inline; !important}
7 голосов
/ 04 февраля 2010

Тег <p> может содержать только встроенные элементы. Теги заголовка являются элементами уровня блока и не могут входить в теги <p>, даже если вы их стилизуете для отображения встроенного.

Они семантически неверны, учитывая это использование в любом случае - у абзацев не должно быть случайных заголовков, плавающих внутри них. Подумайте о правильном использовании тегов <em> и <strong>, или, если они действительно не соответствуют тому, что вы пытаетесь описать, используйте теги <span> с конкретными классами.

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
pulvinartincidunt neque, at blandit leo mattis vitae.
Cras <em>placerat</em> justo vel risus porta cursus. Nullam eget
sem nibh. Sed <strong>mattis</strong> facilisis rhoncus. Morbi sit
amet nisl lectus.</p>
2 голосов
/ 06 июля 2012

Теги «H» предназначены для заголовков, заголовков, чтобы показать переломный момент в теме. Теги «p» предназначены для совместного контроля длины текста, каждый отдельный абзац получит «p». Теги «span» должны идти только внутри тегов «p», они используются для отображения акцента в абзаце, но они ограничены, когда дело доходит до стиля CSS. К сожалению, вы должны следовать html-структуре этих тегов, иначе у вас будет что-то свое в каждом браузере.

1 голос
/ 22 декабря 2011

Теги p автоматически ломаются, как только html-анализатор достигает тегов hx. если вы действительно хотите это сделать, вы должны закрыть тег p перед тегом hx. затем установите p и hx для отображения inline!

1 голос
/ 04 февраля 2010

SLaks это правильно. Вы не должны использовать заголовок в пункте. Однако, если вам это действительно нужно (в случае, если это написано кем-то другим). Вы можете решить эту проблему, установив p как встроенный. Это сработает.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...