海洋 CMS 模板分页样式错乱怎么调整

分页样式错乱，99% 的情况不是海洋 CMS 的分页功能坏了，而是「分页输出的 HTML 结构」和「模板 CSS 选择器」对不上——先按 F12 看渲染后的真实 DOM，再改 CSS，最后才动模板标签，三步之内基本能解决。

海洋CMS 分页样式错乱怎么快速定位问题？

结论：定位分页错乱，第一步永远是浏览器 F12 看渲染后的 DOM，而不是先改模板。

操作方法：在列表页右键分页区域 → 检查，在 Elements 面板里复制整个分页容器的 outerHTML。你会看到三种情况之一：

1. 结构正常（<div class="pagination"><a>1</a><a>2</a></div>），说明是纯 CSS 问题，跳到下一节；
2. 出现 </ul></div> 之类的断裂，或者分页链接被拆成一堆并列的 <a>，说明分页代码被写在了 <p> 或 <li> 内部，浏览器自动纠正了标签嵌套，把 <ul> 提前闭合了；
3. 分页区完全没样式，Network 面板里 CSS 文件返回 404。

第 2 种情况必须回模板，把分页标签从任何 <p>、<li>、<table> 内部拿出来，放到 <ul> 闭合之后、容器 </div> 之前。第 3 种情况通常是伪静态后目录层级变化导致相对路径失效，把 CSS 引用改成以 / 开头的绝对路径即可。

为什么分页链接会竖排成一列或者挤成一团？

结论：竖排一列几乎都是分页 <a> 被设成了 display:block，或者父容器宽度是 100% 的块级元素；挤成一团则多半是父容器的 font-size:0 或不换行导致的间距丢失。

在 F12 的 Computed 面板里选中某个分页链接，看三项值：display、float、width。只要 display 是 block 且 width 是 100%，就一定竖排。这就是典型的全局样式污染——模板里写了 .content a{display:block} 之类的通配规则，把分页链接一起命中了。

三种常见表现的对应修法：

• 竖排一列：给分页容器加 display:flex;flex-wrap:wrap;justify-content:center，或者给内部 a、span 强制 display:inline-block;width:auto；
• 完全没间距：给每个链接 margin:0 3px;padding:4px 10px；
• 分页跑到正文中间或压住页脚：分页容器内部用了 float:left 但父级没清除浮动，给容器加 .pagination::after{content:"";display:block;clear:both}。

分页 CSS 应该怎么写？

结论：分页样式必须写在一个独立、选择器足够明确（带父级 class 前缀）的规则块里，不要写裸标签选择器。

可直接复制到模板 CSS 里的完整写法：

.pagination{clear:both;text-align:center;margin:20px 0;font-size:14px;line-height:2}
.pagination a,.pagination span{display:inline-block;padding:4px 10px;margin:0 3px;border:1px solid #ddd;border-radius:3px;color:#333;text-decoration:none}
.pagination a:hover{background:#f40;color:#fff;border-color:#f40}
.pagination .current{background:#f40;color:#fff;border-color:#f40}
.pagination::after{content:"";display:block;clear:both}

注意两点：一是类名以你模板实际输出的为准（常见是 .pagination、.page、.pages，用 F12 看一眼就知道），别照抄类名；二是移动端要补一条媒体查询，@media(max-width:640px){.pagination a,.pagination span{padding:3px 7px;margin:0 2px;font-size:13px}}，否则手机上分页会横向溢出。

改了模板和 CSS 却不生效怎么办？

结论：海洋 CMS 改动不生效，按「模板缓存 → 浏览器缓存 → 静态页」的顺序排查，三步都做完再看结果。

1. 后台执行清除缓存，海洋 CMS 会把模板编译结果缓存到运行时目录，不清缓存改 template/ 目录下的文件可能看不到变化；
2. 浏览器按 Ctrl+F5 强制刷新，或 F12 → Network 勾选 Disable cache；
3. 如果站点开启了 HTML 静态生成，改模板不会影响已生成的 .html 页面，需要重新生成，或临时关掉静态化看动态页面是否正常。

另外，模板文件保存时必须是 UTF-8 无 BOM 编码。带 BOM 的文件会在页面顶部输出一个不可见字符，轻则页面顶部多一行空白，重则整个 <head> 失效、CSS 全丢——这是「样式突然全乱」里最容易被忽略的一个原因。

分页条数和样式有关系吗？

结论：没有关系。每页显示多少条、分页显示几个页码，是后台的列表参数和分页逻辑决定的；样式错乱是前端 CSS 和 HTML 结构问题，调后台数字不会修好样式。

排查顺序记住一句话：先看 DOM 结构对不对，再看 CSS 有没有被污染，最后看缓存和编码。绝大多数分页错乱，改一个 display:inline-block 加一行清除浮动就结束了。