先直接上效果图：
二、帖代码
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 /*25%;*/ 39 /*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>