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

Update css to following

ul{ 
    width: 20em;
    border: 4px solid gray;
    padding: 0.5em 2em;
    margin: 5em auto;
    list-style: None;
    display:flex;
}

li {
    float: left;
    margin: 20px 30px 20px 0;
    border-right-style: dotted;
    padding-right : 15px;
}

For reference - https://jsfiddle.net/9qyv03u3/3/

Answer 2

See the fiddle

Remove your float-left and use display:inline-block

Changed CSS

ul {
    width: 20em;
    border: 4px solid gray;
    margin: 5em auto;
    list-style: None;
}
li {
    display:inline-block;
    margin: 20px 30px 10px 0;
    border-right-style: dotted;
    padding-right : 15px;
}

Answer 3

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>

Answer 4

It looks like you need to adjust the top margin of the li.

    li {
float: left;
margin: 10px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
}

Instead of

    li {
float: left;
margin: 20px 30px 10px 0;
border-right-style: dotted;
padding-right : 15px;
}

Answer 5

Depending on the situation I would advise against hard coding your height/width and floating li elements to make them display in one line. You can use li { display: inline-block } to achieve the same effect.

Check out the fiddle I created which achieves the same result with less code: https://jsfiddle.net/ojqu54bd/

ul {
   list-style: none;
   border: solid 4px grey;
   padding:10px;
}

li {
   display: inline-block;
   border-right-style: dotted;
   padding: 5px 10px;
}

Answer 6

like this?

if so, remove li margin and add line-height: 30px; or whatever your ul height is. It will always be vertically centered, but it will also work only in a single line

ul{ 
   width: 20em;
    border: 4px solid gray;
    padding: 0.5em 2em;
    margin: 5em auto;
   list-style: None;
   height: 30px;
}

li {
float: left;
border-right-style: dotted;
padding-right : 15px;
    line-height: 30px;
}

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