ul的最后一个li成分在其余部分以下对齐

Question

I'm having trouble getting the final LI element to align in my nav-container. I've got the other four spaced fine and there is enough space for the fifth element to display in the container but it's getting pushed down somehow. I'm pretty confused as to why this is happening. HTML and CSS below. Any help greatly appreciated!

<div class='top_menu_wrapper'>
    <div class='top_menu_center'>
        <ul>
            <li class='menu_link menu'>Who We Are</li>
            <li class='menu_link menu'>Family House</li>
            <li class='menu_link ypac_logo menu'> IMAGE PLACEHOLDER</li>
            <li class='menu_link menu'>Upcoming Events</li>
            <li class='menu_link menu'>Get Involved</li>
        </ul>
    </div>
</div>

CSS:

.top_menu_wrapper{
  min-height: 65px;
  border: 1px solid black;
  position: fixed;
  width:100%
  }
.top_menu_center{
 width:65%;
 border: 1px solid black;
 margin: 0 auto;
 height:100px;
 }
.top_menu_center ul{
 list-style-type:none;
 width:100%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 height:100px;
}
.top_menu_center li{
 display:inline-block;
 height:100px;
 width:20%;
 margin:0 0 0 0;
 padding:0 0 0 0;
 text-align:center;
}

Answer 1

You need to change inline-block to inline

.top_menu_center li{
 display:block;
 float:left;
 height:100px;
 width:20%;
 margin:10px 0;
 padding:0 0;
 text-align:center;
}

You'll have some spacing issues though so I've set up a jsfiddle here: http://jsfiddle.net/rileychuggins/YF7DX/

Answer 2

For some reason, the sum of your li 's width is more than 100%. Therefore the last element gets pushed out of the box. Anyway, if you change width of the li from 20% to 19% it starts fitting better in Chrome. You can do the research on why 5 * 20% != 100% in this instance.

Fiddle: http://jsfiddle.net/WP6Lb/

Answer 3

You should just float the li 's and set it up so that the ul clears the float.

Here's a jsfiddle: http://jsfiddle.net/efgdY/

As a side note, if you intend to have them pushed down (by what looks like 10-15 pixels, as in the original CSS), you can set the padding-top value and add box-sizing: border-box; of the .top_menu_center li .

Answer 4

You can try using float: left instead of display: inline

.top_menu_center li{
    float: left;
    height:100px;
    width:20%;
    margin:0 0 0 0;
    padding:0 0 0 0;
    text-align:center;
}

See: http://fiddle.jshell.net/RQQLJ/