很多提供企業級服務的應用，都會有一個價目表。

不同等級的服務所包含的功能不同，功能數量也不同，因此每個價目表的高度也不同。

但為了 UI 的美觀，我們通常需要把幾個價目表做成等高的樣子，并且讓購買按鈕始終居于底部，如下圖所示：

等高價目表

html 代碼

在編寫 HTML 結構時，要盡量減少不必要的標簽和嵌套，讓代碼看起來整潔，這樣才有利于后期的維護修改：

<div class="demo">
    <div class="box">
        <div class="title">
            標準型 NORMAL
        </div>
        <ul class="list">
            <li class="item"><strong>600MB</strong> 磁盤空間</li>
            <li class="item"><strong>16GB</strong> 月流量</li>
            <li class="item"><strong>4</strong> MySQL數據庫</li>
            <li class="item"><strong>4</strong> 停靠域名</li>
            <li class="item"><strong>無限</strong> 子域名數量</li>
            <li class="item"><strong>4</strong> 建站數</li>
            <li class="item">中文的cPanel面板</li>
        </ul>
        <button class="btn">立刻購買</button>
    </div>
    <div class="box">
        <div class="title color2">
            進階型 ADVANCED
        </div>
        <ul class="list">
            <li class="item"><strong>1600MB</strong> 磁盤空間</li>
            <li class="item"><strong>49GB</strong> 月流量</li>
            <li class="item"><strong>4</strong> MySql數據庫</li>
            <li class="item"><strong>4</strong> 停靠域名</li>
            <li class="item"><strong>無限</strong> 子域名數量</li>
            <li class="item"><strong>4</strong> 建站數</li>
            <li class="item"><strong>無限</strong> FTP數量</li>
            <li class="item"><strong>php</strong> 支持語言</li>
            <li class="item">中文的cPanel面板</li>
        </ul>
        <button class="btn">立刻購買</button>
    </div>
    <div class="box">
        <div class="title color3">
            專業型 PROFESIONAL
        </div>
        <ul class="list">
            <li class="item"><strong>2000MB</strong> 磁盤空間</li>
            <li class="item"><strong>160GB</strong> 月流量</li>
            <li class="item"><strong>14</strong> MySql數據庫</li>
            <li class="item"><strong>14</strong> 停靠域名</li>
            <li class="item"><strong>無限</strong> 子域名數量</li>
            <li class="item"><strong>4</strong> 建站數</li>
            <li class="item"><strong>無限</strong> FTP數量</li>
            <li class="item"><strong style="color: #C42871;">免費</strong> SSL證書</li>
            <li class="item"><strong>PHP</strong> 支持語言</li>
            <li class="item">中文的cPanel面板</li>
            <li class="item">免備案</li>
        </ul>
        <button class="btn">立刻購買</button>
    </div>
</div>

我們每個 ul.list 元素下的 li.item 標簽數目都不一樣，因為不同的服務對應不同數量的功能。

但這樣也使得每個 ul.list 元素的高度不同，下面就要使用神奇的 css 來扭轉乾坤。

CSS 代碼

話不多說，直接上代碼，一邊看代碼一邊看注釋，邏輯都在注釋里：

.demo {
  
    display: flex;
    justify-content: space-around;
}
.box {
    display: flex;
    flex-direction: column;
    width: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid #ddd;
}
.title {
    line-height: 80px;
    background-color: #00AAD5;
    text-align: center;
    color: #fff;
}
.color2 {
    background-color: #95C83D;
}
.color3 {
    background-color: #F5891F;
}
.list {
    padding: 40px 20px;
}
.item {
    margin-top: 10px;
    list-style: none;
    color: #8e959c;
    font-size: 14px;
}
.item strong {
    color: #000;
    font-size: 16px;
}
.btn {
    width: 160px;
    line-height: 40px;
    margin: auto auto 20px;
    background-color: #80bf28;
    border: 1px solid #80bf28;
    border-radius: 4px;
    box-shadow: 0px 4px 0px #5a951d;
    color: #fff;
}

簡單又實用的 CSS 技巧，你學會了嗎？