水平等距排列效果制作过程

步骤1：创建并初始化测试代码

为了便于观察，给每一个元素添加border或background-color，以此区分嵌套层级
得到如下代码：

-----------html部分-----------------
<body>
  <ul>
    <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li>
  </ul>
</body>
-----------CSS部分-----------------
  <style>
 * {margin: 0; padding: 0;}
ul,li {list-style: none;}
ul {border: 2px blue solid; width: 320px; padding: 10px;}
li {background-color: red; width: 100px; height: 100px;}
  </style>

有9个那么长，大概900px

步骤2：初步实现样式、寻找问题

标签 li ：添加 float 、margin
标签 ul ：添加负margin
增加的代码如下：

-----------CSS部分-----------------
  <style>
    ul {margin-left: -10px; overflow: hidden;}
    li {float: left; margin-left: 10px;}
  </style>

这个结果不是我想要的

很显然没有得到想要的结果，仔细对比一下发现存在两个问题：

步骤2中的 "标签ul" - margin: -10px; 覆盖了步骤1中 "标签ul" - margin: 0 auto; 造成 "标签li" 无法居中，却被 "标签ul" 拉偏了位置
"标签ul" 本身宽度不足以放下 "带有左边框的3个标签li"，所以也没有按九宫格顺序排列

3.解决问题

首先，CSS代码由上至下按序排列，造成下方代码会覆盖上方代码，所以margin无法调序，但可以使用 "标签div" 包裹 "标签ul" ，再去实现居中就容易得多
其次，需要改变 "标签ul" 的最小宽度，使其内部可以在以行内放下 "带有左边框的3个标签li"
代码修改部分

-----------html部分-----------------
<div class="box">
  <ul> 
    <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>
-----------CSS部分-----------------
<style>
  .box {width: 320px; margin: 0 auto;} /*增加width、margin*/
  ul {width: 330px; /*width: 320px;*/ /*margin: 0 auto;*/} /*修改width，删除margin*/
</style>

显然问题解决了，但不够美

4.美化：使其更像九宫格

美化一下，使其看起来更像九宫格，增加代码如下

-----------CSS部分-----------------
  <style>
    li {margin: 5px 0 5px 10px;}
  </style>

九宫格出来了

5.几句解释

现在 "标签li" 在 "标签div" 中基本上算是居中了，但左右还是存在缝隙，这是因为所有元素都设有边框，而边框是要占位置的，"标签div" 在屏幕正中央，但 "标签ul" 会将 "标签li" 向右拖移2px，此时去掉 "标签ul" 的边框才是想要的最终节果， "标签li" 水平等距排列并且居中了

最终示例代码

示例效果

- 最后的总结

1.水平等距排列，是需要三层的
最内层负责浮动
中间层负责偏移
最外层作为参照物制造错觉，让最内层看起来是水平等距排列；最后利用合适的方法，将这个整体固定在页面上
2.它们的宽度问题
最内层子元素宽度根据实际需求设定宽度
中间层宽度最小宽度 = 带边框的最内层子元素宽度 * N（根本不用设置宽度）
最外层宽度 = 中间层宽度－一个边框宽度