核心思路
织梦手机站（默认使用 /m/ 目录）的图片列表，无论是文章内容图、图集还是其他栏目图片,其HTML结构通常是这样的：
（图片来源网络，侵删）
<div class="listbox">
<div class="img">
<a href="[链接地址]">
<img src="[图片地址]" alt="[图片说明]">
</a>
</div>
<div class="info">...</div>
</div>
我们的目标就是让这些包含 .listbox 的容器（或者里面的图片）从纵向排列变为横向排列。
修改手机站CSS文件（最推荐、最安全）
这是最标准也是最推荐的方法，通过覆盖或添加CSS样式,来实现布局的改变。
步骤 1：找到手机站的CSS文件
手机站的CSS文件通常位于以下路径：
/m/你的模板目录/style/ 或 /m/你的模板目录/css/ 目录下。
常见的文件名有：
（图片来源网络，侵删）
style.cssmobile.cssmain.csslist.css(如果是列表页样式)
你可以通过FTP工具登录你的网站服务器，在 /m/ 目录下找到你的模板文件夹，然后进入其中的 css 或 style 文件夹。
步骤 2：添加或修改CSS代码
打开你找到的CSS文件，在文件末尾添加以下代码,你可以根据你的具体需求选择其中一种。
场景A：让文章列表的缩略图横向排列
这是最常见的场景，比如在首页、栏目页的文章列表里,让所有文章的缩略图并排显示。
/* 修改文章列表的布局，让图片横向排列 */
.listbox {
display: flex; /* 使用弹性布局 */
flex-direction: row; /* 设置主轴方向为水平（横向） */
align-items: center; /* 垂直方向居中对齐 */
margin-bottom: 15px; /* 可选：增加列表项之间的间距 */
border-bottom: 1px solid #eee; /* 可选：增加分隔线 */
padding-bottom: 15px; /* 可选：增加内边距 */
}
/* 调整图片容器和图片的样式，使其适应横向布局 */
.listbox .img {
flex-shrink: 0; /* 防止图片容器被压缩 */
margin-right: 15px; /* 图片容器之间的右边距 */
}
.listbox .img img {
width: 100px; /* 设置一个固定的图片宽度 */
height: 75px; /* 设置一个固定的高度，保持比例 */
object-fit: cover; /* 让图片填充区域，不变形 */
}
.listbox .info {
flex: 1; /* 让信息区域占据剩余的所有空间 */
overflow: hidden; /* 防止内容溢出 */
}
代码解释：
（图片来源网络，侵删）
display: flex;：这是关键，它将.listbox变成一个弹性容器。flex-direction: row;：告诉容器，子元素（.img和.info）应该水平排列。align-items: center;：让垂直方向上的元素（图片和文字）都居中对齐,看起来更整齐。flex-shrink: 0;：防止图片容器因为空间不够而被压缩变形。flex: 1;：让.info区域自动拉伸，填满剩余空间,这样文字就不会被挤到下面去。
场景B：让图集内的图片横向排列
如果你想让一个文章内的图集图片横向滚动,可以使用以下代码：
/* 修改图集的布局，让图片横向排列并可滚动 */
/* 假设图集的HTML结构是 .article-content .pics-box .pic-list */
.pics-box .pic-list {
display: flex;
overflow-x: auto; /* 允许横向滚动 */
white-space: nowrap; /* 防止图片换行 */
gap: 10px; /* 图片之间的间距 */
}
.pics-box .pic-list img {
height: 150px; /* 设置一个统一的高度 */
width: auto; /* 宽度自动，根据高度比例调整 */
object-fit: cover;
flex-shrink: 0; /* 防止图片被压缩 */
}
步骤 3：清除缓存并刷新
- 清除浏览器缓存：按
Ctrl + F5(Windows) 或Cmd + Shift + R(Mac) 强制刷新网页。 - 清除织梦缓存：登录你的织梦后台，进入“系统” -> “清除缓存”，选择“一键更新缓存”并点击“开始执行”。
你的手机站图片就应该在一行显示了。
使用自定义CSS（无需修改模板文件）
如果你的主题支持在后台添加自定义CSS，或者你使用的是新版织梦（如DedeCms V5.7/V5.8），这个方法更简单,无需通过FTP修改文件。
- 登录织梦后台。
- 进入“系统” -> “系统基本参数” -> “核心设置”。
- 找到 “
自定义CSS” 或 “手机端自定义CSS” 这一项（不同版本名称可能略有不同）。 - 将 方法一 中提供的CSS代码粘贴进去。
- 点击“保存”。
- 同样，记得去“系统” -> “清除缓存”。
修改模板文件（不推荐，仅限高级用户）
如果你对织梦模板结构非常熟悉，并且想让修改永久生效,可以直接修改模板文件。
- 找到模板文件：手机站的模板文件通常在
/m/你的模板目录/目录下，列表页模板是list_article.htm，首页模板是index.htm。 - 修改HTML结构：找到包含
{dede:list}标签的循环部分。 - 添加CSS：最直接的方式是在模板文件的
<head>部分或<body>的最上方，通过<style>标签嵌入 方法一 中的CSS代码。
为什么不推荐？
- 升级麻烦：下次你升级织梦模板时,这些修改可能会被覆盖。
- 耦合度高：模板和样式混在一起,不利于后期维护。
示例（在 list_article.htm 中修改）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">{dede:field.title/}</title>
<link rel="stylesheet" href="{dede:global.cfg_templets_skin/}/style/css.css">
<style>
/* 在这里添加你的CSS代码，覆盖默认样式 */
.listbox {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.listbox .img {
margin-right: 15px;
}
.listbox .img img {
width: 100px;
height: 75px;
object-fit: cover;
}
.listbox .info {
flex: 1;
}
</style>
</head>
<body>
<!-- 你的模板内容 -->
{dede:list}
<div class="listbox">
<div class="img"><a href="[field:arcurl/]"><img src="[field:litpic/]" alt="[field:title/]"></a></div>
<div class="info">
<h3><a href="[field:arcurl/]">[field:title/]</a></h3>
<p>[field:description function='cn_substr(@me,100)'/]...</p>
</div>
</div>
{/dede:list}
<!-- 你的模板内容 -->
</body>
</html>
总结与排查
如果按照上述方法操作后图片仍然没有在一行显示,请检查以下几点：
- CSS优先级：可能你的主题有更具体、优先级更高的CSS样式覆盖了你的修改，尝试在你的CSS选择器前增加
!important（慎用），或者使用更具体的选择器（.listbox .img img）。.listbox .img img { width: 100px !important; /* 强制生效 */ } - 图片容器宽度：如果父容器（如
.listbox）的宽度不够，flex布局可能会自动换行,检查一下是否有其他CSS限制了容器的宽度。 - 浏览器兼容性：
flexbox是现代CSS标准，所有主流手机浏览器都支持，如果你的网站需要支持非常老旧的浏览器，可能需要使用display: inline-block的老方法，但flexbox是目前最佳实践。
对于绝大多数情况，方法一（修改CSS文件） 是最稳定、最正确的解决方案。
