java等距排列_搞清水平等距排列——九宫格

组合使用 float 和 负margin 就能完成水平等距排列效果，但在我手里貌似不那么听话，总是跑偏不到中间位置，说明我还不那么懂它，那就分析一下问题所在。

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

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

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

得到如下代码：

-----------html部分-----------------

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

-----------CSS部分-----------------

* {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;}

有9个那么长，大概900px

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

标签 li ：添加 float 、margin

标签 ul ：添加 负margin

增加的代码如下：

-----------CSS部分-----------------

ul {margin-left: -10px; overflow: hidden;}

li {float: left; margin-left: 10px;}

这个结果不是我想要的

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

步骤2中的 "标签ul" - margin: -10px; 覆盖了步骤1中 "标签ul" - margin: 0 auto; 造成 "标签li" 无法居中，却被 "标签ul" 拉偏了位置

"标签ul" 本身宽度不足以放下 "带有左边框的3个标签li"，所以也没有按九宫格顺序排列

3.解决问题

首先，CSS代码由上至下按序排列，造成下方代码会覆盖上方代码，所以margin无法调序，但可以使用 "标签div" 包裹 "标签ul" ，再去实现居中就容易得多

其次，需要改变 "标签ul" 的最小宽度，使其内部可以在以行内放下 "带有左边框的3个标签li"

代码修改部分

-----------html部分-----------------

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

-----------CSS部分-----------------

.box {width: 320px; margin: 0 auto;} /*增加width、margin*/

ul {width: 330px; /*width: 320px;*/ /*margin: 0 auto;*/} /*修改width，删除margin*/

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

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

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

-----------CSS部分-----------------

li {margin: 5px 0 5px 10px;}

九宫格出来了

5.几句解释

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

- 最后的总结

1.水平等距排列，是需要三层的

最内层负责浮动

中间层负责偏移

最外层作为参照物制造错觉，让最内层看起来是水平等距排列；最后利用合适的方法，将这个整体固定在页面上

2.它们的宽度问题

最内层子元素宽度根据实际需求设定宽度

中间层宽度最小宽度 = 带边框的最内层子元素宽度 * N(根本不用设置宽度)

最外层宽度 = 中间层宽度 － 一个边框宽度

本文章著作权归饥人谷_蛮力拳猫和饥人谷所有，转载须说明来源！