EyouCMS导航栏错位的实用修复技巧亲测可落地

谁懂啊，EyouCMS导航栏错位真的烦死人

有没有做站的哥们，刚搭完EyouCMS，或者改了点模板，抬头一看导航栏歪得像刚学步的小孩，头疼得抓头发？我前阵子帮朋友修站，就碰过这种情况，折腾了快俩小时才搞定，总结了几个真能用的法子。

那些容易导致EyouCMS导航栏错位的小坑

改CSS时手贱动了浮动规则

我之前改某个本地站的导航，手贱把li标签的浮动值删了个0.1，结果导航直接飘到logo下面去了，整个站的首页都毁了，还好我提前备份了原文件。这里真的要提醒，别瞎动EyouCMS默认的浮动结构，人家本来就是给你调试好的，你改前复制一份原CSS存桌面，出问题直接换回来就行，省得哭。

后台拖拽导航菜单项搞砸布局

很多人爱用EyouCMS后台的拖拽功能排导航，觉得省事，结果拉完发现有的菜单项挤到换行，有的直接消失了，别慌，别用拖拽排序！去后台导航管理里点手动排序的数字按钮，我亲测，拖拽功能的bug巨多，点那个小数字，输进去想排的顺序，一下就顺了，再也不会乱。

移动端适配没跟上的隐形雷

有没有人只改了PC端的导航样式，移动端打开直接叠成一坨？这时候肯定是你没给手机端单独写适配，一定要给移动端加media query，重新定义导航的浮动和宽度，比如PC端li是float:left，移动端就改成display:block，宽度100%，我之前漏了这个，给客户演示站的时候尴尬得要死，客户以为我拿个半成品忽悠他。

亲测有效的修复操作，一步到位

上次帮三个朋友修了同样的问题，都是这么弄的，一次成。找到你网站根目录里的CSS文件，比如common.css，定位到导航栏的样式，比如nav，先给它加个overflow:hidden，这是最常见的清除父容器塌陷的办法，很多人就是忘了这个，导致导航栏乱跑。代码如下：

```css nav{ overflow:hidden;/ 清除浮动，解决父容器塌陷导致的导航错位 / } ```

如果还是错位，再看看li的宽度，是不是超出了父容器，给li设个固定宽度或者min-width，别让它硬撑着，菜单项多的话就调整，别挤在一起。还有个小细节，要是导航的字重叠，大概率是行高的问题，给.nav a标签加line-height:40px，别让字贴得太近，看起来就舒服了，我之前就是行高设成20px，字直接叠成一团，调整后瞬间就好了。

说白了，EyouCMS本身没那么多幺蛾子，都是改的时候太心急，碰了不该碰的地方，踩过这几个坑，以后再也不用和导航栏错位死磕了，省下来的时间还能多喝两杯奶茶呢。