首先，回顾下自己今天的工作过程：边写边删，再写再删，效率极其低下。而且中间心情也很糟糕，脾气有点急躁。原因：

1. 昨天熬夜了，看《琅琊榜》，到凌晨4点：胡歌依旧那么帅，虽然和逍遥哥哥的帅不一样。刘涛很漂亮啊，演技也很好的样子。靖王酷酷哒，竟然有我家冯叔的影子，尤其是眼睛和嘴巴，不过比我冯叔脸小。。。咳咳，言归正传。缺觉，导致今天脑子不好使了，变笨了。这是大前提。
2. 没了思考时间：越想赶紧把那个ui搞定，结果就越想“立马”干活，导致写之前没动脑子。
3. 手生：我不编移动 box 好多年，常规和常识性的问题，没能提前规避，而是 try try try
4. 心…有点不静最近。昨天之所以发呆看电视打发时间，是因为昨天回家路上情绪莫名超级无敌低落，结果到家后整个人都很阴郁一点都不high。

特此记录下，好提醒自己，以后别犯此类白痴错误了。引以为戒。

这边博客的主题是：乍看起来极其简单的列表ui，在移动端，应该用 table 还是 ul？ul 是应该弹性盒子还是浮动？

列表的三种布局方式

实现列表的，有三种常见的方式：

1. table：宽度自适应，或者简单的宽度控制
2. ul-li：用浮动和百分比
3. ul-li：用弹性盒子

今天纠结的小点：

1. 如果要行可点击时，排除 table，用 ul。
2. 如果有页签切换，直接用 table 不可行：如果宽度纯自适应，那切换时列表看起来会抖，体验不好
3. 宽度的分配问题：百分比不好设置，尤其移动端屏幕宽度不定。有时窄屏下刚刚好的比例到宽屏下就有些空荡不协调了；宽屏下合适的比例在窄屏下又被挤的掉下去了-这个很严重的。

先说说这三种布局的特点：

table

1.没有行点击的，可用
2.没有页签切换的，可用：要保证tab切换时视觉上的不抖动，就得设置百分比。
3.列中有换行，同行要保持垂直对齐的
总之：横竖的对齐+内容的自适应+行不会掉下来，这三点就让原生的 table 天生棒棒哒。
但是一旦要加额外限制，table 就显得有点重了。额外限制包括：行可点击-不能实现；不同即有宽度-又有样式限制限制-html层次就深了。

float 加 %

兼容性挺好：各种浏览器都支持，而且表现也较一致
问题1：移动端宽度设置不好设置—原因如今天纠结的3—你看，这个时候table就比较好了-原生的对齐就很协调
问题2：一个宽度要改，其余的比例也都要适当地重新计算再修改，不方便。
问题3：多行时，列的对齐又不好控制-当列的宽度不是定死的时候。灵活就会导致潜在的不对齐。

inline-block 和 nowrap 呢？试试，应该可以。即有百分比，又不会掉下去。

弹性盒子

弹性盒子：比例简单灵活、且行不掉。不得不说，移动端弹性盒子确实挺好的
好处1：比例改动起来很方便-定个比例or固定宽度，比例就直接自适应了，而不用算来算去。
好处2：代码写起来看起来也比table轻便，且后续改动样式很灵活

结果却发现，在移动端，弹性盒子的兼容性也挺多。且之前没问题的，现在也有问题了…你大爷
问题1：弹性盒子失效，子必须设置block 【css会很奇怪有没有，为什么要block呢…之前也没那规矩-敏敏说越是移动端越是新版的浏览器弹性盒子的问题越多】
问题2：弹性盒子，每行的比例竟然不一样 【连列都不对齐了，你还是我之前认识的弹性盒子吗？】

小结

于是，我最后选定了：ul + float + 百分比
因为要行可点击，因为弹性盒子的坑我实在没精气神去查去填了。

最后发现了个问题：设置了百分比后，当窄屏时行会掉下去。因为，列自己里面有设置了 padding-left 和 padding-right
解决：border-box 【不过，在移动端还用这个盒模型，总感觉是退步。呵呵哒。— 不过吧，有时候我觉得人家ie的盒模型挺符合现实的】

如何选型

你看，上面YY了那么多，结论却是：布局整齐的，有时不灵活；太灵活的，又是高风险（兼容性和ui自适应性）。A面B面S面自己都说了。这结论，胜似无结论啊。
好吧，还是得下点结论的。编码之前，先问自己几个问题：

1. 整行要可点击吗？若要，那就果断抛弃 table，用 ui。
2. 列表数据量可控吗？若不可控，果断 table。它的天生横竖对齐，真的挺好的。
3. 有页签切换吗？若没有，那就 table吧，一个 table 内容会自适应的很好。
   若有页签，那给 table 设置 width 方便控制吗？方便的话，那就果断 table。
   若有页签，且宽度不好定。。。连 table 宽度比例都不好定了，你用 ui（不论是浮动百分比还是弹性盒子）效果能更好么？

写到这吧，却发现，在宽度的布局上，他们之间其实都彼此差不多。原来。。。自己今天来来回回反反复复倒腾的那几个问题，结论其实如此明显-那自己当时怎么那么混沌呢？至于为什么会那样，是无从考证了，但唯一可以肯定的就是：今天纯纯的是只用手敲代码了，而丝毫没经过大脑。

我的故事讲完了，最后的浓缩竟然是：气愤忧伤的开始，伤感悲催的结局。这。。。
速速回家好好睡觉晚上给脑子充值去。明天，我要一个美好、清晰、哈皮的开始！！！！！！！！！！！！