最近在看imooc上的demo，然而今天碰到一个很头疼的问题。

先上源码，上面的是我的，下面的是源码。

源码链接

代码几乎相同，body等我用的是百分比不过应该不影响。

用absolute属性定位却到了下一行（很疑惑为什么跟随性没有起作用）排查后发现是.regist-cell设置成display: table-cell;在源码中这样使用是为了实现对其的效果（下方按钮与input框）然而我使用相同的方法却到了下一行；

讲该属性删除，效果恢复正常（不清楚为什么源码这样可以，机制是什么）

在网上找到了元素设定table-cell后的的浏览器补全机制

原文章

简单地总结一下，table->[table-row-group(table-column-groun)](此处可缺省)->table-row(table-column)->table-cell是一套结合使用的(相当于HTML中的table，tr，td，col等标签)，浏览器会自动补充完整，具体方法可以看原文，总结起来就是，当前元素设立了table的某属性，若子元素不完整则填充匿名子元素，并且匿名子元素与其他子元素成为table中相应的内容，当前元素的父元素无table相关属性同理。

然后我将.regist-cell中的display:table-cell改为table-row，子元素自动变成table中的cell，这样能够实现button对齐的效果，同时不会跑到下一行。

css table-cell自动补充元素问题