html5 - Block element inside custom element inside <p> -

i'm using html5 custom elements create might termed "rich footnotes" (essentially little mouseover boxes). markup looks like

<p>   socrates   <x-info>     <x-text>       man     </x-text>     <x-planation>       <p>what man? here examples of men:</p>       <ul>         <li>bill clinton</li>         <li>aristotle</li>       </ul>     </x-planation>   </x-info>, therefore socrates mortal </p> 

which should render like

socrates man, therefore socrates mortal

such box appears when hover on word man. works fine when <x-info> contains inline elements. however, in above example html parser gets angry have <p>s , <ul>s nested inside <p>, , mangles markup renders more like

socrates man

what man? here examples of men:

• bill clinton
• aristotle

, therefore socrates mortal

is there way around this? avoid changing markup structure, out of control (otherwise, have preprocess on backend).

the html parser not 'getting angry', browser that's applying default styles elements have used.

a list (ul, ol, dl) block-level element, accepted default styles, , browsers apply styles (padding, margin, bullets, numbers, etc.) these elements in order make them lists.

in case, unordered list, bulleted list items standard rendering browsers. issue don't want list list, have 2 options:

1. don't use markup list.
2. remove default styling list.

if cannot alter markup, you'll want option 2, can achieve little bit of css.

ul {display: inline-block; padding: 0, margin: 0; list-style: none} ul > li {display: inline;} 

of course, option 1 far easier can use:

<p>what man? here examples of men: bill clinton, aristotle, therefore socrates mortal</p> 

there's nothing wrong semantically, there's no obvious reason why content couldn't considered paragraph; how want appear.

p.s. in specific example preferable use <dfn> element markup word creating definition for. definition list <dl> choice here.