Consider this HTML snippet:
<ul><li><p>With paragraph</p></li></ul>
<ul><li>Without paragraph</li></ul>
and the corresponding CSS:
ul { list-style-position: inside; }
In the first list item, the text appears below the bullet point, while in the second item it appears as expected. What is causing this issue, and how can the CSS be adjusted to ensure that the text aligns directly after the bullet?
For a live demonstration, click here.