先直接上效果图：
二、帖代码
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="Author" content="haley">
6 <meta name="Keywords" content="表格">
7 <meta name="Description" content="静态html页面 ul+li模拟table，减少代码冗余，列数切换更方便">
8 <title>静态html页面 ul+li模拟table，减少代码冗余，列数切换更方便</title>
9 </head>
10 <body>
11 <div>
12 <div>
13 <style>
14 ul,li{
15 padding:0;margin: 0;
16 list-style: none;
17 }
18 .liTable{
19 overflow: hidden;
20 box-sizing: border-box;
21 border-right: 1px solid #333;
22 border-bottom: 1px solid #333;
23 }
24 .liTable li{
25 text-align: left;
26 float: left;
27 padding-left:5px;
28 box-sizing: border-box;
29 border-left: 1px solid #333;
30 border-top: 1px solid #333;
31 height: 40px;
32 line-height: 40px;
33 overflow: hidden;
34 }
35 /* 宽度控制 */
36 .liTable li{
37 width:33.333333333333%;
38 /*width:25%;*/
39 /*width:50%; */
40 }
41 label{cursor: pointer;}
42 </style>
43 <div class="liTable">
44 <ul>
45 <li><label><input type="checkbox" value="1.同业者/合作伙伴推荐"/> 1.同业者/合作伙伴推荐</label></li>
46 <li><label><input type="checkbox" value="2.曾参观FIBO CHINA考察"/> 2.曾参观FIBO CHINA考察</label></li>
47 <li><label><input type="checkbox" value="3.主办方电邮宣传"/> 3.主办方电邮宣传</label></li>
48 <li><label><input type="checkbox" value="4.网络搜索/展会信息网站"/> 4.网络搜索/展会信息网站</label></li>
49 <li><label><input type="checkbox" value="5.健身行业媒体的宣传（广告、资讯、BANNER、新闻/报道/评论"/> 5.健身行业媒体的宣传（广告、资讯、BANNER、新闻/报道/评论</label></li>
50 <li><label><input type="checkbox" value="6.大众媒体（广告、新闻/报道/评论）"/> 6.大众媒体（广告、新闻/报道/评论）</label></li>
51 <li><label><input type="checkbox" value="7.在相关行业活动/路演上收到展会资料/信息"/> 7.在相关行业活动/路演上收到展会资料/信息</label></li>
52 <li><label><input type="checkbox" value="8.大众社交媒体（微博，微信等）"/> 8.大众社交媒体（微博，微信等）</label></li>
53 <li><label><input type="checkbox" value="9.官方网站"/> 9.官方网站</label></li>
54 <li><label><input type="checkbox" value="10.官方微信"/> 10.官方微信</label></li>
55 <li><label><input type="checkbox" value="11. 其他，请注明"/> 11. 其他，请注明</label><input type="text" placeholder="请输入其他来源"></li>
56 <li> 最后一个元素last-child</li>
57 </ul>
58 </div>
59 </div>
60 </div>
61 </body>
62 </html>
时间： 2024-10-12 06:49:16