Li contents are rendered outside ul container border

Question

In this JsFiddle - https://jsfiddle.net/9qyv03u3/

It looks like this:

ul {
    width: 20em;
    border: 4px solid gray;
    padding: 0.5em 2em;
    margin: 5em auto;
    list-style: None;
    height: 30px;
}
li {
    float: left;
    margin: 20px 30px 10px 0;
    border-right-style: dotted;
    padding-right : 15px;
}

<ul>
    <li>Questions</li>
    <li>Tags</li>
    <li>Users</li>
</ul>

I am able to bring the contents inside box by giving ul {height: 40px;} but still the space above menu items are much larger than the space below.

How can I place the menu items inside ul container's center?

Answer 1

The reason that you see the items out of box is because the height collapsing on the container, learn more here. as a quick fix you could simply set ul{overflow:auto;}.

But I suggest to use display:inline-block on the li rather than float, set same amount of top and bottom padding, remove height, and add text-align:center on the ul. That will make sure the items centered in both ways.

ul {
    width: 20em;
    border: 4px solid gray;
    list-style: none;
    margin: 5em auto;
    padding: 1em 0;
    text-align: center;
}
li {
    display: inline-block;
    border-right-style: dotted;
    margin-right: 10px;
    padding-right : 15px;
}
/* extra refinement */
li:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}

<ul>
    <li>Questions</li>
    <li>Tags</li>
    <li>Users</li>
</ul>