组合使用 float 和 负margin 就能完成水平等距排列效果，但在我手里貌似不那么听话，总是跑偏不到中间位置，说明我还不那么懂它，那就分析一下问题所在。
水平等距排列效果制作过程
步骤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（根本不用设置宽度）
最外层宽度 = 中间层宽度 － 一个边框宽度
