unordered list in a paragraph element

when I write this:

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

my browser is semantically rendered it as:

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

why ? and is there a bett开发者_如何学运维er way to introduce list-items in a paragraph ?

According to the HTML 5 specification, a paragraph may contain phrasing content, which still does not include other grouping elements:

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

According to the HTML 4.01 specification, a paragraph may only contain inline elements:

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 --
  >

The correct markup in this case is to close your paragraph before starting the list.

Alternatively, you can use another tag other than paragraph (like <div>) which is not processed in this way.

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

I just had this issue and did not want to enclose it in a DIV since I was using P for the rest of that page and all pages. Instead I styled SPANs to behave like LIs.

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>

Lists aren't allowed in paragraphs - there's no way to do it, it's semantically impossible.

If you want the list to inherit styles from the paragraph, just add the UL element to the same CSS styles as your P elements:

eg:

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

or better yet, encase both elements in something logical (section, article, div).

You've got to ask yourself why you want the list inside the paragraph. If it's because you want them styled the same, then you want them both in the same containing element, eg:

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

and then style the article.

Try this. I added it in the middle of my paragraph and it worked. I also gave it a class and line breaks.

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;
}

I just added a background color and padding, which you can remove after. It helps to see what's happening.