- 使用 CSS Flexbox 布局（推荐，最灵活）
- 使用 Dede 的
loop标签和arclist标签组合（传统方法）
我会为您详细解释这两种方法,并提供完整的代码示例。
使用 CSS Flexbox 布局（强烈推荐）
这是目前最现代、最灵活、最推荐的方法，它只需要修改 CSS 样式，不需要修改 PHP 模板文件，对系统侵入性最小,也最容易维护。
原理： 你不需要关心列表里有多少条数据，只需要用 CSS 告诉浏览器：“这个列表容器里的每个子项（每篇文章）都排成一行，如果空间不够就自动换行，并且让每行都正好能放下5个。”
操作步骤：
第一步：修改你的列表页模板文件
打开你的列表页模板文件，通常位于 /templets/default/ 目录下，list_article.htm。
找到文章列表的循环代码,它看起来通常是这样的：
{dede:list pagesize='20'}
<li>
<a href="[field:arcurl/]">[field:title/]</a>
<span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
</li>
{/dede:list}
确保你的列表项（<li>）被一个父容器包裹起来，如果上面代码中没有，你需要手动添加一个 <ul> 或 <div> 包裹起来。
修改后的结构如下：
<!-- 添加一个 class 为 article-list-wrapper 的容器 -->
<div class="article-list-wrapper">
{dede:list pagesize='20'}
<li>
<a href="[field:arcurl/]">[field:title/]</a>
<span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
</li>
{/dede:list}
</div>
第二步：添加 CSS 样式
在你的模板文件中找到 <head> 标签内的 <style> 部分，或者在后台的“核心” -> “全局变量设置” -> “网站head.htm”中引入你的CSS文件，然后添加以下 CSS 代码：
/* 设置列表容器的样式，使用 Flexbox 布局 */
.article-list-wrapper {
display: flex; /* 启用 Flexbox 布局 */
flex-wrap: wrap; /* 允许项目换行 */
list-style: none; /* 去掉列表前的点 */
padding: 0; /* 去掉内边距 */
margin: 0; /* 去掉外边距 */
gap: 15px; /* (可选) 设置列表项之间的间距 */
}
/* 设置每个列表项的样式 */
.article-list-wrapper li {
/* 关键：设置每个 li 占据父容器宽度的 20%，这样一行正好能放 5 个 (100% / 5 = 20%) */
flex: 0 0 20%;
/* (可选) 如果需要固定宽度，可以设置一个固定值，*/
/* width: 19%; */ /* 考虑到 gap 的影响，宽度可以稍微小一点 */
/* (可选) 让每个列表项看起来像一个卡片 */
box-sizing: border-box; /* 让 padding 和 width 的计算更直观 */
padding: 10px;
border: 1px solid #eee;
border-radius: 5px;
}
/* (可选) 响应式调整：在小屏幕上，每行显示2个 */
@media (max-width: 768px) {
.article-list-wrapper li {
flex: 0 0 50%; /* 一行显示2个 */
}
}
/* (可选) 响应式调整：在更小的屏幕上，每行显示1个 */
@media (max-width: 480px) {
.article-list-wrapper li {
flex: 0 0 100%; /* 一行显示1个 */
}
}
优点：
- 代码简洁：HTML 模板几乎不需要改动。
- 维护方便：只需修改 CSS 就能调整每行显示数量（比如改成4个，把
20%改成25%即可）。 - 响应式友好：可以轻松通过媒体查询（
@media）实现不同屏幕尺寸下每行显示不同数量的文章。 - 性能好：纯前端实现,对服务器没有额外负担。
使用 Dede 的 loop 标签（传统方法）
这种方法通过 PHP 在后端进行循环控制，生成固定列数的 HTML 结构，它适用于不熟悉 CSS 或需要特定复杂布局的场景。
原理：
先获取文章列表数据，然后用一个外层循环控制“行”，内层循环控制“列”，外层循环一次，就生成一行包含5个 <li> 的结构。
操作步骤：
第一步：修改你的列表页模板文件
打开你的列表页模板文件（如 list_article.htm），将原来的 {dede:list} 标签全部替换为以下代码：
{dede:sql sql="SELECT * FROM `dede_archives` AS a JOIN `dede_arctype` AS t ON a.typeid = t.id WHERE a.channel=1 AND a.arcrank=0 ORDER BY a.id DESC LIMIT 0,20"}
[field:id/]
{/dede:sql}
<!-- 将上面的测试标签替换为下面的正式代码 -->
<!-- 外层循环，计算需要多少行 -->
{dede:loop table='dede_archives' sort='id' row='20' if='channel=1 and arcrank=0'}
[field:global name=autoindex runphp="yes"]
// 如果是第1个，或者能被5整除（即第6、11、16...个），则开始新的一行
if (@me % 5 == 1 || @me == 1) {
@me = "<ul class='row-list'>";
} else {
@me = "";
}
[/field:global]
<li>
<a href="[field:arcurl/]">[field:title/]</a>
<span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
</li>
<!-- 如果是第5个，或者能被5整除（即第5、10、15...个），并且是最后一个，则结束这一行 -->
[field:global name=autoindex runphp="yes"]
// 如果是最后一个，并且当前计数能被5整除，则关闭ul标签
if (@me == 20 && (@me % 5 == 0)) {
@me = "</ul>";
}
// 如果不是最后一个，但当前计数能被5整除，也关闭ul标签
else if (@me < 20 && (@me % 5 == 0)) {
@me = "</ul>";
} else {
@me = "";
}
[/field:global]
{/dede:loop}
代码解释：
{dede:loop ...}：循环获取20篇文章数据。row='20'是你想要显示的文章总数。[field:global name=autoindex ...]：获取当前循环的次数（从1到20）。runphp="yes"：允许在标签内使用PHP代码。if (@me % 5 == 1 || @me == 1)：判断当前计数是否为1、6、11...，如果是，就输出<ul class='row-list'>开始一个新行。if (@me % 5 == 0)：判断当前计数是否为5、10、15...，如果是，就输出</ul>结束当前行。- 注意：这里需要处理边界条件，特别是当总数量（如20）能被5整除时，确保最后一个
</ul>被正确输出。
第二步：添加 CSS 样式
为了布局正确，你仍然需要一些简单的 CSS：
/* 清除ul的默认样式 */
.row-list {
list-style: none;
padding: 0;
margin: 0;
display: flex; /* 使用flex让li在一行内排列 */
gap: 15px; /* 可选，设置li之间的间距 */
}
.row-list li {
flex: 1; /* 让所有li平分ul的宽度 */
/* 可选的li样式 */
box-sizing: border-box;
padding: 10px;
border: 1px solid #eee;
text-align: center; /* 让内容居中 */
}
优点：
- 结构固定：生成的HTML结构非常规整，每一行都被
<ul>包裹。 - 不依赖CSS：即使CSS加载失败,列表项也能按块显示。
缺点：
- 模板复杂：PHP 逻辑混在 HTML 中，可读性差,不易维护。
- 不够灵活：如果想改成每行4个，需要修改PHP逻辑,而不是简单的CSS。
- 扩展性差：实现响应式布局非常困难。
总结与建议
| 特性 | 方法一 (Flexbox) | 方法二 (Loop标签) |
|---|---|---|
| 推荐度 | ⭐⭐⭐⭐⭐ (强烈推荐) | ⭐⭐ (不推荐，仅作了解) |
| 实现难度 | 简单 (只需改CSS) | 复杂 (需要修改PHP模板) |
| 代码维护 | 非常容易 | 困难 |
| 响应式支持 | 非常好 | 困难 |
| 灵活性 | 极高 | 较低 |
对于所有新项目或需要维护的项目，请优先选择方法一（Flexbox CSS 布局），它是现代Web开发的标准做法，能让你以最少的精力实现最佳的效果和最高的可维护性，方法二是一种过时的技术，仅在处理非常老旧、无法修改模板逻辑的 DedeCMS 系统时才可能用到。
