美团移动端-巧用伪类布局

今天在小程序前端FED的文章里面看到了关于每段移动端选择城市的一个布局，忽然觉得这个布局其实挺巧妙的。

布局如下:

美团移动端城市选择

在查看样式的时候发现，最后一个空格里面是没有元素的。下面自己写了两种，加上美团的视线方案。(ps:挺久不切图了，代码很糟。)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<div class="box">
        <ul>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li>上海</li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="container">
        <ul>
            <li>北京</li>
            <li>北京</li>
            <li>北京</li>
            <li>北京</li>
            <li>北京</li>
            <li>北京</li>
            <li>北京</li>
            <li>北京</li>
            <li>北京</li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
<div class="mt">
    <ul>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
        <li>杭州</li>
    </ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
*{margin: 0;padding: 0}
        ul,li {list-style: none}
        body {padding: 0 20px}
        .box {margin-top: 50px}
        .box ul {border-radius: 4px;overflow: hidden;border-left: 1px solid #ccc;border-top: 1px solid #ccc }
        .box ul li {
            width: 25%;
            height: 40px;
            font-size: 16px;
            color: #333;
            text-align: center;
            line-height: 40px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            float: left;
            box-sizing: border-box;
        }
        .container {
            width: 324px;
            height: 120px;
            border-left: 1px solid #ccc;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            border-right:none;
            border-radius: 4px;
            overflow: hidden;
            margin: 40px auto;
        }
        .container ul {height: 100%}
        .container ul li {
            width: 80px;
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: #333;
            text-align: center;
            border: 1px solid #ccc;
            margin-left: -1px;
            margin-top: -1px;
        }
        .mt{
            border: 1px solid #ccc;border-radius: 4px;margin: 20px auto
        }
        .mt ul {position: relative;clear: both;min-height: 80px;overflow: hidden}
        .mt ul li {
            display: inline-block;
            font-size: 16px;
            width: 25%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-bottom: 1px solid #ccc;
            margin-bottom: -1px;
            float: left;
        }
        .mt ul:after {
            content: '';
            position: absolute;
            width: 10%;
            left: 75%;
            height: 100%;
            border-left: 1px solid #ccc;
            border-right: none;
        }
        .mt ul:before {
            content: '';
            position: absolute;
            width: 25%;
            left: 25%;
            height: 100%;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
        }

原图地址:美团网
效果图就不再贴了，首先我的两种方案也可以实现，但是第一种方案有瑕疵，右下角会有空白，第二种方案并不是很适合移动端布局。
两种方案的通病就是为了占位创建了多余的元素，从语义化来讲，这并不合理。创建空元素来占行。

美团方案解析：
外框的用外层div.mt进行创建，中间的横线由li进行创建，竖线使用伪类。

美团的方案利用伪类进行布局，代码上也算优雅，好处是它根本不需要管下面到底多少个元素，我们的还要人为的填充。
这个代码本身也有缺陷，因为你可能也看出来了，伪类值可以用两个，创建出来的元素只能有两条线，也就是说最多只能画出四条线，最多进行五栏的布局。
但是从当前需求来将，确实是一种比较可行的方案。

其他的小伙伴有兴趣也可以自己研究一套更为合适的方案，首先，我们尽量用js去控制，那就有点得不偿失了。