菜单对齐（可能是不可见的不可处理边距）答案

【问题标题】：Menu aligning (probably invisible non-hendleable margin)菜单对齐（可能是不可见的不可处理边距）
【发布时间】：2015-11-30 20:31:35
【问题描述】：

我想将我的菜单（这些红块）对齐到中心，如下所示：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，每个红色块有 200px（4x 200 = 800 ... 100px 的可用空间），红色块的 margin-right 为 33px，除了最后一个 li 元素。所以必须有 1px 的可用空间。

那么为什么最后一个红块跳出队列？：/

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

非常感谢！主要问题是，我忘了关闭 ul 元素。
@UsopleskCz 是的，在通过 CSS 尝试之后，我终于注意到了。

【解决方案2】：

您应该将 CSS flex 属性与 justify-content: space-between 一起使用。

这里我留下sn-p：

#main {
  border: 1px solid blue;
  margin: auto;
  width: 900px;
}
nav.menu {
  width: 100%;
}
nav.menu ul {
  margin: 0;
  padding: 0;
  width: 100%;
/* this makes the magic ************/
  display: flex; 
  justify-content: space-between;
/***********************************/
}
nav.menu ul li {
  width: 200px;
  background: red;
  text-align: center;
  display: inline-block;
}
nav.menu a {
  line-height: 70px;
}

<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>

【讨论】：