基本上，我的问题很简单。目前，magento 在列表视图中显示产品的方式对于我的需求来说太大了。它使用的图像比我想要的要大得多，并且列出的每个产品都占用大量空间。我想要调整列表的大小，使每个产品基本上都是一两行，其中包括左侧非常小的缩略图、标题、简短描述，最后是价格。如果我能以这种方式列出我的产品，更多的产品将能够以简洁的方式放在一个页面上（这正是我所需要的）。
作为参考，网站当前在列表视图中显示产品的方式可以在这里看到几个测试产品：http://soundcherry.com/index.php/sound-effects.html
我有什么方法可以达到我想要的结果吗？我不确定要修改哪些文件或要更改哪些文件。我一直在做尽可能多的研究，但我有点业余（尤其是在任何类型的编码方面）并且我无法弄清楚。
任何帮助将不胜感激。谢谢！
【问题讨论】：
我本来想评论的，但不合适
编辑模板文件和css文件
例如在 style.css 上
（在您的主机上http://soundcherry.com/skin/frontend/default/f002/css/styles.css）
在第 799 行更改 padding:12px 10px;到填充：1px 2px； 然后硬刷新（Ctrl+F5）并查看结果 或在第 801 行的同一文件上，您可以更改 margin:0 0 10px;到边距：0 0 2px； 并将宽度和高度更改为宽度：80px；高度：80px； 您还可以在第 801 行之后添加一行以强制调整这些图像的大小，如下所示： .products-list .product-image img { 宽度：80px;高度：80px； }
但您应该更改模板文件中的 维度，
搜索你的模板文件夹，当你在< img >标签中找到文件时编辑width=和height=
为此，您应该编辑您的模板文件，（它们是带有 .Phtml 文件扩展名的 html 文件，位于 im /template/ 文件夹中）找到您需要更改的文件并进行更改
看看这个页面，因为它有很多有用的信息
我使用过其他系统，但不是 magento
我不知道它到底是哪个文件，我认为它可能是 products.phtml 或您的模板文件夹中的东西
代码是这样的
<div class="f-fix">
<h2 class="product-name"><a href="{$link}" title="{$title}">{$title}</a></h2>
<div class="price-box"><span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span></div>
<p class="availability out-of-stock"><span>{$availability}</span></p>
<div class="desc std">{$desc}<a href="{$link}" title="{$title}" class="link-learn">Learn More</a>
</div><ul class="add-to-links"><li><a href="{$wishlist}" class="link-wishlist">Add to Wishlist</a></li>
<li><span class="separator">|</span> <a href="{$compare}" class="link-compare">Add to Compare</a></li>
</ul>
</div>
因为 和 标签（可能出现如 ）是块元素，您应该对它们应用 style="display:inline-block" 这可以是像这样申请
<p class="availability out-of-stock" style="display:inline-block">
或者您可以像这样将新类按空格应用到当前标签
|HERE|
<p class="availability out-of-stock new_class">
然后像这样在你的 style.css 中定义这个类
.new_class { display:inline-block; }
或者去掉
和标签，让它们都出现在一行中，比如： <div class="f-fix">
<h2 class="product-name"><a href="{$link}" title="{$title}">{$title}</a></h2>
<span class="regular-price" id="product-price-3"><span class="price">{$price}</span></span>
<span style="availability out-of-stock">{$availability}</span>
{$desc}<a href="{$link}" title="{$title}" class="link-learn">Learn More</a>
<a class="add-to-links" href="{$wishlist}" class="link-wishlist">Add to Wishlist</a>
<span class="separator">|</span> <a href="{$compare}" class="link-compare">Add to Compare</a>
</div>
我认为您编辑此类脚本模板可能有点早，请考虑阅读 html 和 css 教程以及我首先给您的页面
加上这个 Magento 设计指南：
我知道目前这并不好玩，但相信我它如此简单（但您尝试从复杂的脚本和模板开始，请谷歌搜索简单示例以开始学习 CSS 和HTML)，一旦你学会了 CSS 和 HTML，你就会非常喜欢它们
【讨论】：