HTML / CSS Display: встроенная проблема

Question

У меня есть несколько абзацев текста в документе HTML.Кроме того, в различные моменты часть текста заключена в теги <h6></h6>, которые предназначены для применения определенных эффектов шрифта.В моем CSS тег h6 установлен на display:inline;, поэтому абзац продолжает работать непрерывно без переноса строки.Это работает за исключением для первого экземпляра h6 на каждой используемой странице: всегда есть разрыв строки перед первым элементом .Кто-нибудь знает, почему / как это предотвратить?

CSS:

h6 {
    font-family:'Courier New',Courier,'Nimbus Mono L',monospace;
    font-size:125%;
    display:inline;
}

HTML:

As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new <h6>Lytebox JavaScript</h6> I talked about
earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>...

Вторая сущность h6 работает нормально, но естьразрыв строки перед первым.

Answer 1

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

Ваш конкретный HTML получаетизменено браузерами:

<p>
As expected, not a lot was accomplished (in this plane) over a
five-day weekend when much of it was devoted tot he college
process. However, I'm down to only a handful of HTML-validation
errors. A couple of which are going to be particularly problematic,
dealing with my new
</p>                           <!-- browsers end a paragraph here!!!!! -->
<h6>Lytebox JavaScript</h6>
I talked about earlier: to enable Lytebox on an image, you give it a CSS tag
<h6>data-lyte-options</h6>
...
<p></p>

Я нашел ссылку на этот факт в спецификации HTML:

Элемент P представляет абзац,Он не может содержать элементы уровня блока (включая сам P).

И еще одна ссылка , в которой говорится об элементах уровня блока:

Таблицы стилей предоставляют средства для задания рендеринга произвольных элементов, включая отображение элемента как блочного или встроенного.В некоторых случаях, таких как встроенный стиль для элементов списка, это может быть уместно, но, вообще говоря, авторам не рекомендуется переопределять традиционную интерпретацию элементов HTML таким образом.

Решение?

Проблема в том, что вы используете заголовки как обычный текст абзаца (со своим собственным стилем).Вместо этого вам следует использовать элементы SPAN, чтобы сделать ваш HTML действительным.

Если все, что вам нужно, это отформатировать текст, который будет отображаться в виде кода, вы также можете использовать элемент CODE, который должениспользовать именно для этой цели.

Answer 2

Вы хотите, чтобы элемент был встроенным и применил специальное форматирование шрифта, верно?Затем вы можете заключить их в тег «span»

As expected, not a lot was accomplished (in this plane) over a five-day weekend when much of it was devoted tot he college process. However, I'm down to only a handful of HTML-validation errors. A couple of which are going to be particularly problematic, dealing with my new <span>Lytebox JavaScript</span> I talked about earlier: to enable Lytebox on an image, you give it a CSS tag <span>data-lyte-options</span>

span { font-family:'Courier New',Courier,'Nimbus Mono L',monospace;font-size:125%;}

Answer 3

Почему бы не создать уникальный класс и не применить его к тегам <p> по мере необходимости. Вы упоминаете, что некоторые из них заключены в теги h6 для применения стилей. Это можно сделать с помощью <p class="onestyle"></p>, и все же вы можете иметь <p></p> обычных тегов p.

Затем с помощью h6 вы можете перемещать их влево вместо использования display:inline или делать inline-block, примерно одинаковый аффект со всеми. Затем примените поля отступов по мере необходимости ко всем своим стилям.

Answer 4

Попробуйте использовать селекторы CSS, чтобы специально нацелиться на этот экземпляр. Не уверен на 100%, что это все исправит, но стоит попробовать.

h6:first-child { display:inline; }