列表模拟表格

这个只有四列，用到的是伪元素定位模拟

by weiming le

HTML

<div id="hot-city" class="box nopadding" style="margin-top:40px;">
    <ul class="table">
        <li><a class="react" gaevent="imt/selectCity/shanghai" href="http://i.meituan.com/?city=shanghai" data-citypinyin="shanghai">上海</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/beijing" href="http://i.meituan.com/?city=beijing" data-citypinyin="beijing">北京</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/chongqing" href="http://i.meituan.com/?city=chongqing" data-citypinyin="chongqing">重庆</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/chengdu" href="http://i.meituan.com/?city=chengdu" data-citypinyin="chengdu">成都</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/shenzhen" href="http://i.meituan.com/?city=shenzhen" data-citypinyin="shenzhen">深圳</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/nanjing" href="http://i.meituan.com/?city=nanjing" data-citypinyin="nanjing">南京</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/tianjin" href="http://i.meituan.com/?city=tianjin" data-citypinyin="tianjin">天津</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/hangzhou" href="http://i.meituan.com/?city=hangzhou" data-citypinyin="hangzhou">杭州</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/guangzhou" href="http://i.meituan.com/?city=guangzhou" data-citypinyin="guangzhou">广州</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/xian" href="http://i.meituan.com/?city=xian" data-citypinyin="xian">西安</a>

        </li>
        <li><a class="react" gaevent="imt/selectCity/wuhan" href="http://i.meituan.com/?city=wuhan" data-citypinyin="wuhan">武汉</a>

        </li>
    </ul>
</div>

CSS

* {
    margin:0;
    padding:0;
}
html {
    font-size: 312.5%;
}
ul {
    list-style: none;
}
.table {
    margin: .4rem;
    min-height: .8rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
    border: 1px solid #ddd8ce;
    border-radius: 3px;
}
.table:before {
    content:'';
    position: absolute;
    width: 25%;
    left: 25%;
    height: 100%;
    border-left: 1px solid #ddd8ce;
    border-right: 1px solid #ddd8ce;
}
.table:after {
    content:'';
    position: absolute;
    width: 10%;
    left: 75%;
    height: 100%;
    border-left: 1px solid #ddd8ce;
    border-right: none;
}
.table li {
    width: 25%;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    border-bottom: 1px solid #ddd8ce;
    margin-bottom: -1px;
    float: left;
    position: relative;
    z-index: 10;
    font-size: .275rem;
}
.react {
    display: block;
    height: 100%;
    text-decoration: none;
    color: #333;
}