如何修改商品分类的列表显示为2列，请大家帮帮忙啊

2016-07-07 15:01 来源：www.chinab4c.com 作者：ecshop专家

我要把左边的商品分类树单列显示的改为2列显示，但是改了好久都不会，请大家帮忙解决下啊，谢谢啦！

本来是这样显示的，我要下面的效果


我找到的控制的代码的地方：
  1. <meta http-equiv="Content-Type" content="text/html; charset=gbk">
  2. <div class="box">
  3. <div class="box_1">
  4. <div id="category_tree">
  5. <!--{foreach from=$categories item=cat}-->
  6. <dl>
  7. <dt><a href="{$cat.url}">{$cat.name|escape:html}</a></dt>
  8. <!--{foreach from=$cat.cat_id item=child}-->
  9. <dd><a href="{$child.url}">{$child.name|escape:html}</a></dd>
  10. <!--{foreach from=$child.cat_id item=childer}-->
  11. <dd>&nbsp;&nbsp;<a href="{$childer.url}">{$childer.name|escape:html}</a></dd>
  12. <!--{/foreach}-->
  13. <!--{/foreach}-->

  15. </dl>
  16. <!--{/foreach}-->
  17. </div>
  18. </div>
  19. </div>
  20. <div class="blank5"></div>
复制代码
  1. /*商品分类*/
  2. #category_tree{border:4px solid #f1faff; background-color:#fff;}
  3. #category_tree dl{margin:6px;}
  4. #category_tree dt{background:url(images/lineBg.gif) repeat-x left bottom;
  5. color:#3f3f3f;padding:2px 0 3px 12px;
  6. }
  7. #category_tree dt a{background:url(images/bg.gif) no-repeat 0 -69px;
  8. color:#3f3f3f; padding-left:15px; text-decoration:none;
  9. }

  11. #category_tree dd{padding:3px 0 3px 10px;}
  12. #category_tree dd a{color:#404040; text-decoration:none;}
  13. #category_tree dd a:hover{color:#ff6600; text-decoration:none;}
复制代码

回答：
定义子分类宽度。再float:left对齐

下面教程是以 2.7.2版 官方默认模板 为例 进行讲解的，已经测试通过，完全兼容IE6,IE7,火狐。其他模板请参照举一反三。

-------------------------------------------------------------------------------------------------------------------

打开 /themes/default/style.css 文件

找到 #category_tree dd{padding:3px 0 3px 10px;}

将它修改为
#category_tree dd{padding:3px 0 3px 10px;width:40%;overflow:hidden;float:left;white-space:nowrap;word-break:keep-all;display: inline;}


然后再打开/themes/default/library/category_tree.lbi 文件

在 </dl>

下面增加一行代码
<div style="clear:both;"></div>




谢谢啊，用你的差不多可以，但是还有点问题，就是当过长的时候会隐藏起来……

长了会隐藏 起来这个 有没有办法解决的呢。