本來覺得寫前端頁面也不是一天兩天，這樣的問題應該是小菜一碟，可真正在做專案調格式的時候卻突然懵逼了，想了半天才想明白是什麼問題（也有可能因為之前已有的 css 總檔案並不是我寫的，沒找到問題的癥結）。如果你是一個前端小白，希望你不要踩這樣的坑；如果你是一個入門級選手，希望你在做企業級專案的時候會想到這一點~

下面說正題

首先我搭了一個這樣的頁面框架

<div class="wrapper">
        <ul>
            <li>
                <span>我是第一個ul下的span</span
 
>
                <ul>
                    <li>我是第一個li下巢狀ul的第一個li</li>
                    <li>我是第一個li下巢狀ul的第二個li</li>
                    <li>我是第一個li下巢狀ul的第三個li</li>
                </ul>
            </li>
            <li>我是第一個ul下的第二個li</li
 
>
            <li>我是第一個ul下的第三個li</li>
        </ul>
        <ul>
            <li>
                <span>我是第二個ul下的span</span>
                <ul>
                    <li>我是第二個li下巢狀ul的第一個li</li>
                    <li>我是第二個li下巢狀ul的第二個li</li
 
>
                    <li>我是第二個li下巢狀ul的第三個li</li>
                </ul>
            </li>
            <li>我是第二個ul下的第二個li</li>
            <li>我是第二個ul下的第三個li</li>
        </ul>
    </div>

此時的顯示是這樣的

當我添加了 css 樣式以後（儘可能復現了一下當時的場景）

.wrapper {
    padding: 10px 10px 30px;
    background: #eee;
    overflow: visible;
}

.wrapper li {
    height: 39px;
    line-height: 39px;
    list-style-type: none;
}

然後就出現了當時遇到的問題（程式碼是我接觸的專案的程式碼，儘可能精簡以精確表達自己觀點）。

當時的我一頭霧水。。。後來突然發現 li 是定高的！！！因為 overflow 設定為 visible 所以超出高度的部分都顯示出來了==還需要說明一點啊，line-height 和 height 兩者並沒有關聯關係~~

當我把 height 註釋掉以後，列表就達到了自己想要的效果了。

.wrapper {
    padding: 10px 10px 30px;
    background: #eee;
    overflow: visible;
 }

 .wrapper li {
     /*height: 39px;*/
     line-height: 39px;
     list-style-type: none;
 }

附帶說一點，line-height 有三種設定方式，一是使用百分比設定行間距，二是使用畫素值設定行間距，三是使用數值來設定行間距。

使用百分比設定時，需要注意在大多數瀏覽器中預設行高大約是 110% 到 120%。這種方法貌似沒怎麼用過。使用畫素值肯定就不用說了，都是寫死的畫素值，平時用的最多了。第三種方法感覺挺實用，預設行高大約是1，類似於 word 裡單倍行距多倍行距的感覺。

好啦總結完了，繼續敲程式碼~