Неупорядоченный список в элементе абзаца

когда я пишу это:

<p class="paragraph">the list:
  <ul>
    <li>item</li>
  </ul>
</p>

мой браузер семантически отображает его как:

<p class="paragraph">the list:</p>
<ul>
  <li>item</li>
</ul>
<p></p>

почему? и есть ли лучший способ ввести элементы списка в абзаце?

Ответ 1

В соответствии со спецификацией HTML 5.0 абзац может содержать фразинг-контент, который до сих пор не включает другую группировку элементы:

http://www.w3.org/TR/html5/grouping-content.html#the-p-element

В соответствии со спецификацией HTML 4.01 абзац может содержать только встроенные элементы:

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

9.3.1 Paragraphs: the P element

<!ELEMENT P - O (%inline;)*            -- paragraph -->
<!ATTLIST P
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Правильная разметка в этом случае - закрыть ваш абзац перед запуском списка.

В качестве альтернативы вы можете использовать другой тег, отличный от абзаца (например, <div>), который не обрабатывается таким образом.

<div>
   <ul> ... </ul>
</div>

Ответ 2

Списки не допускаются в параграфах - нет способа сделать это, это семантически невозможно.

Если вы хотите, чтобы список наследовал стили из абзаца, просто добавьте элемент UL в те же стили CSS, что и ваши элементы P:

например:

p, ul { font-size: 12px; }

или еще лучше, заключите оба элемента в нечто логичное (раздел, статья, div).

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

<article>
    <p>Paragraph of text</p>
    <ul>
        <li>List</li>
    </ul>
    <p>Next paragraph</p>
</article>

а затем создайте статью.

Ответ 3

У меня просто была эта проблема и я не хотел ее вложить в DIV, так как я использовал P для остальной части этой страницы и всех страниц. Вместо этого я разработал SPAN, чтобы вести себя как LI.

SPAN.li  {display: list-item; margin-left: 2em}

<P>These issues are currently on my mind
<SPAN class=li>My hat</SPAN>
<SPAN class=li>Global warming</SPAN>
<SPAN class=li>Global cooling</SPAN>
<SPAN class=li>Global terrorism</SPAN>
<SPAN class=li>Global narrow-mindedness</SPAN></P>

Ответ 4

Попробуйте это. Я добавил его в середине моего абзаца, и он сработал. Я также дал ему класс и разрывы строк.

HTML:

<div>
<ul class="list">
<br><li>LIST</li></br>
<br><li>LIST</li></br>
</ul>
</div>

CSS

.list{
list-style: black circle;
padding: 15 15 15 15;
background-color: grey;
}

Я только добавил цвет фона и отступы, которые вы можете удалить после. Это помогает понять, что происходит.