Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Placing an ordered/unordered list inside a <p>

jPaulB

Coder
Hi Everybody,

I want to include an unordered list inside a box. The code I've supplied down below will draw an empty box just fine and then continue to render the unordered list.
How do I correct this so that the "box" will contain the whole unordered list?

Example.css
CSS:
.box {
    border-style: solid;
    border-width: 2px;
    border-color: #000000;
    background-color: #FFFFF5;
    border-radius: 5px;
    padding: 10px;
    margin-left: 30px;
}

Example.html
HTML:
<p class="box">
    <ul>
        <li><h4>HTML</h4></li><h5>Basic Description</h5>
        <li><h4>CSS</h4></li><h5>Basic Description</h5>               
        <li><h4>PHP</h4></li><h5>Basic Description</h5>
        <li><h4>JavaScript</h4></li><h5>Basic Description</h5>
    </ul>
</p>

Many Thanks,
Paul
 
I'm not quite sure why it works like it does with a paragraph. But typically, one would use a div for something like this. And sure enough, if you use <div class="box"> it works a whole lot better !
 
You can not place a list inside a <p> element. Lists are block elements and paragraphs can only contain inline elements
Good explanation. And HTML being HTML, you never get a warning about it... Not even in the W3C HTML validator !
However, the validator does expose other errors like these:

Error: Element h5 not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
From line 23, column 37; to line 23, column 40
</h4></li><h5>Basic Zero or more li and script-supporting elements.
Content model for element ul:

Error: No p element in scope but a p end tag seen.
From line 25, column 1; to line 25, column 4

The second one does actually hint at the fact that <ul> can't be inside <p>, and does in fact end it.

I would encourage the OP to use this validator https://validator.w3.org/ whenever HTML does not work as expected.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom