html - 菜单对齐(可能是不可见的不可处理的边距)

Question

我想像这样将我的菜单(这些红 block )居中对齐:http://i.imgur.com/KDLpjbW.jpg

所以我试着将它与:

HTML

    <div id="main">
    <nav class="menu">
    <ul>
        <li><a href="#1">first red block</a></li>
        <li><a href="#2">second red block</a></li>
        <li><a href="#3">third red block</a></li>
        <li><a href="#4">last red block</a></li>
    <ul>
</nav>
</div>

CSS

nav.menu {
  background: none;
}


nav.menu ul li {
  width: 200px;
  background: red;
  display: inline-block;
  margin-right: 33px;
}

nav.menu ul li:last-child {
  margin-right: 0;
}

nav.menu a {
  line-height: 70px;
}

nav.menu ul {
  width: 100%;
}

#main
{
    border: 1px solid blue;
    margin: auto;
    width: 900px;
}

}

但是结果是这样的: http://i.imgur.com/lriGoFm.jpg

我不知道为什么。外部元素的宽度为 900px，每个红色 block 的宽度为 200px(4x 200 = 800 ... 100px 的可用空间)，除了最后一个 li 元素外，红色 block 的 margin-right 为 33px。所以必须有 1px 的可用空间。

那么为什么最后一个红 block 跳出队列？ :/

Answer 1

*{margin:0;padding:0;box-sizing:border-box}
nav.menu {
  width: 900px; /*gave it fixed for demo purpose */
  margin:0;
  background: none;
}
.menu ul {
  font-size: 0; /* when child elements are inline-block, they get some extra margin, to remove it, we give parent element font-size:0; or make child elements float;*/
  margin: 0;
  padding: 0;
  width:100%;
}
.menu ul li {
  width: 200px;
  background: red;
  display: inline-block;
  margin-right: 33px;
  font-size: 14px; /* as parent had font-size:0; give a new font-size value to view text*/
}
.menu ul li:last-child {
  margin-right: 0;
}
nav.menu a {
  display: block;
  color: #fff;
  text-align: center;
  line-height: 70px;
}
#main {
  border: 1px solid blue;
  margin: auto;
  width: 900px;
}

<nav class="menu">
  <ul>
    <li><a href="#1">first red block</a></li>
    <li><a href="#2">second red block</a></li>
    <li><a href="#3">third red block</a></li>
    <li><a href="#4">last red block</a></li>
    </ul> <!-- your tag wasn't closed, hence last child wasn't working -->
</nav>