很多提供企业级服务的应用，都会有一个价目表。

不同等级的服务所包含的功能不同，功能数量也不同，因此每个价目表的高度也不同。

但为了 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 技巧，你学会了吗？