首页 > 代码库 > 静态html页面 ul+li模拟table，减少代码冗余，列数切换更方便
静态html页面 ul+li模拟table，减少代码冗余，列数切换更方便
先直接上效果图：
二、帖代码
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>
静态html页面 ul+li模拟table，减少代码冗余，列数切换更方便
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。