組合使用 float 和 負(fù)margin 就能完成水平等距排列效果，但在我手里貌似不那么聽話，總是跑偏不到中間位置，說明我還不那么懂它，那就分析一下問題所在。
水平等距排列效果制作過程
步驟1：創(chuàng)建并初始化測試代碼
- 為了便于觀察，給每一個(gè)元素添加border或background-color，以此區(qū)分嵌套層級
得到如下代碼：
-----------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個(gè)那么長，大概900px
步驟2：初步實(shí)現(xiàn)樣式、尋找問題
- 標(biāo)簽 li ：添加 float 、margin
- 標(biāo)簽 ul ：添加 負(fù)margin
增加的代碼如下：
-----------CSS部分-----------------
<style>
ul {margin-left: -10px; overflow: hidden;}
li {float: left; margin-left: 10px;}
</style>
這個(gè)結(jié)果不是我想要的
- 很顯然沒有得到想要的結(jié)果，仔細(xì)對比一下發(fā)現(xiàn)存在兩個(gè)問題：
- 步驟2中的 "標(biāo)簽ul" - margin: -10px; 覆蓋了步驟1中 "標(biāo)簽ul" - margin: 0 auto; 造成 "標(biāo)簽li" 無法居中，卻被 "標(biāo)簽ul" 拉偏了位置
- "標(biāo)簽ul" 本身寬度不足以放下 "帶有左邊框的3個(gè)標(biāo)簽li"，所以也沒有按九宮格順序排列
3.解決問題
- 首先，CSS代碼由上至下按序排列，造成下方代碼會覆蓋上方代碼，所以margin無法調(diào)序，但可以使用 "標(biāo)簽div" 包裹 "標(biāo)簽ul" ，再去實(shí)現(xiàn)居中就容易得多
- 其次，需要改變 "標(biāo)簽ul" 的最小寬度，使其內(nèi)部可以在以行內(nèi)放下 "帶有左邊框的3個(gè)標(biāo)簽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.幾句解釋
現(xiàn)在 "標(biāo)簽li" 在 "標(biāo)簽div" 中基本上算是居中了，但左右還是存在縫隙，這是因?yàn)樗性囟荚O(shè)有邊框，而邊框是要占位置的，"標(biāo)簽div" 在屏幕正中央，但 "標(biāo)簽ul" 會將 "標(biāo)簽li" 向右拖移2px，此時(shí)去掉 "標(biāo)簽ul" 的邊框才是想要的最終節(jié)果， "標(biāo)簽li" 水平等距排列并且居中了
-
最終示例代碼
示例效果
- 最后的總結(jié)
- 1.水平等距排列，是需要三層的
最內(nèi)層負(fù)責(zé)浮動(dòng)
中間層負(fù)責(zé)偏移
最外層作為參照物制造錯(cuò)覺，讓最內(nèi)層看起來是水平等距排列；最后利用合適的方法，將這個(gè)整體固定在頁面上 - 2.它們的寬度問題
最內(nèi)層子元素寬度根據(jù)實(shí)際需求設(shè)定寬度
中間層寬度最小寬度 = 帶邊框的最內(nèi)層子元素寬度 * N（根本不用設(shè)置寬度）
最外層寬度 = 中間層寬度 － 一個(gè)邊框?qū)挾?/li>
