首页商品一行显示数量如何修改

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



首页商品显示数量如何修改？
比如推荐，我现在尺寸改成150*150了，所以每行只能显示3个。
我想让他一行显示4个，如何修改，
我看了下以前有人问的一个帖子，但是没找到合适的。

我用的模板是：sportshoes

www.babawo.cn

回答：
sportsshoes模板中
首页右下角的图标如何更换。

QQ截图未命名1.jpg QQ截图未命名2.jpg

上面一张图，是右下角的图标需要更换

下面一张图是现在一行显示3个，想更改为4个。

你可以参考下
http://bbs.ecshop.com/thread-95341-1-1.html
63里面 的帖子

那里没有啊

因为图片尺寸改大了点，所以他默认会自动分行，导致一行现在显示3个，我想改成4个。

以前找到过，不过现在忘记了。楼主这个模版我好像看到人用过，挺漂亮的。

http://bbs.ecshop.com/viewthread ... mp;extra=#pid422864
15
你可以参考下

楼主换模板了
具体修改得看修改的lib
可以参照楼上 的方法

}
#all-links, #flying{
display:none;
margin-left:0px;
position:absolute;right:0;top:30px;
background:#fff;
}
#flying{
border:1px solid #ba2b09;
top:36px;
}
#cartInfo{
text-align:center;
line-height:26px;
color:#262626;
font-weight:bold;
background:url(images/car.gif) no-repeat 45px 10px;
text-align:left;
}
#ECS_CARTINFO{
border:2px solid #ba2b09;
padding:5px 8px;
line-height:20px;
width:330px;
text-align:center;
}
#ECS_CARTINFO a{
color:#000;
}
#ECS_CARTINFO a:hover{
color:#ff0000;
}
.Left{ width:780px;}
.Right{ width:200px; padding-left:16px;}
.Left .CategoryWid{ width:204px;}
.Left .FlashWid{ width:570px;}
/* ======library ====== */
.brand{
border:1px solid #cccccc;
}
.brand .tit{ background:url(images/tit.gif) no-repeat 0 -398px;background-color:#fafafa; height:20px;}
.brand .contant{ border:7px solid #fafafa; background-color:#fff; padding:3px;}
.brand .contant .line{background:url(images/brandline.gif) repeat-x bottom; height:28px; padding:4px 2px 0 0; line-height:28px;}
.brand .contant .line img{
width:90px;
height:20px;
margin-right:5px;
border:1px solid #ccc;
}
.brand span{
display:block;
width:50px;
float:right;
position:relative; top:10px;
}
.brandsLogo{
width:180px;
padding-top:20px;
text-align:center;
}
.brand_desc{
width:580px;
margin-left:10px;
}
.all_brand .goodsbox{
border:1px solid #ddd;
margin:0 2px 8px 1px;
*margin:0 4px 8px 4px;
padding:5px;
}
.all_brand .goodsbox h4{
background:#eee;
padding:5px;
margin-bottom:8px;
font-weight:100;
}

.flash{
*margin-bottom:8px;
}
.flash img{
*display:block;
}

/*商品分类*/
#category_tree{ text-align:left; background-color:#222;}
#category_tree h2{ background:url(images/tit.gif) 0 -304px; height:40px; line-height:40px;}
#category_tree li{ background:url(images/fenlei.gif) no-repeat; line-height:25px; height:25px; padding-left:48px;width:150px; position:relative;}
#category_tree li a{ color:#fff;}
#category_tree li.cctv{background:url(images/FenHover.gif) no-repeat 4px 0; height:25px;}
#category_tree li.cctv a{color:#000;}
#category_tree li .children{background: url(images/shu.gif) repeat-y;position:absolute; left:193px;top:-15px;display:none; width:303px; padding:10px 0; z-index:999999;}
#category_tree li .children span{ width:303px; height:12px; display:block;}
#category_tree li .children span.T{background:url(images/treetop.gif) no-repeat; position:absolute; top:0px; left:0;}
#category_tree li .children span.B{background:url(images/treebottom.gif) no-repeat; position:absolute;bottom:0px; left:0px;}
#category_tree li .children .conter{background-color:#fff; width:282px;}
#category_tree li .children .conter .suq{ width:18px; height:21px; position:absolute;top:16px; left:-6px; background-color:#FFF;}
#category_tree li .children .conter .ChildrenLi{ float:left; width:40%;background:url(images/fenleidot.gif) no-repeat 4px 9px; padding-left:10px;}
/* 通用模块 */
.PopBorder{
border:1px solid #cccccc;
margin:3px 0px;
}
.Conwid{ padding:8px;}
.NewsTit{background-color:#eee;padding:3px 8px;}
.NewsTit2{ background-color:#FFF;padding:3px 8px; }
#newArticleTab ul li{border-left:1px solid #ccc; float:left; border-top:1px solid #ccc; cursor:pointer;}
#newArticleTab ul li.br{border-right:1px solid #ccc;}
.NewsAricle{border:1px solid #cccccc; padding:10px;}
#ECS_ARTICLE_BODY li{ line-height:22px; padding-left:6px; margin:-4px;}
.ad570{ width:570px; overflow:hidden;}
.ad190{ width:190px; overflow:hidden;}
.BestT{ background:url(images/tit.gif) no-repeat 5px -430px; width:196px; height:31px;}
.BestP{ background:url(images/bestbg.gif) repeat-y;}
.BestP span{width:16px;display:block; padding:0 8px; padding-top:70px;}
.BestP span img{ cursor:pointer;}
.BestP span.scroL,.BestP span.scroR{float:left;}
.BestP .scroMid{float:left; overflow:hidden; _display:inline; position:relative; width:928px; height:200px; padding-bottom:8px; padding-top:10px;}
.BestP .scroMid ul{width:auto; background:none;}
.BestP .scroMid li{float:left; position:relative;margin:0 3px; background:none; _display:inline; overflow:hidden;}
.EarLeft{ width:195px;}
.EarRight{ width:787px;}
.dot{ background: url(images/dot.gif) no-repeat 2px 8px;}

.modTit1{
height:24px;
color:#000;
font-size:14px;
border:1px solid #ccc;
line-height:22px;
background-color:#fafafa;
padding-top:4px;
}
.modTit1 .L{
float:left;
background:url(images/tit.gif) no-repeat 5px -466px;
width:200px;
height:24px;
}
.modTit1 .LHot{
float:left;
background:url(images/tit.gif) no-repeat -190px -434px;
width:200px;
height:24px;
}
.modTit1 .PGood{
float:left;
background:url(images/tit.gif) no-repeat -100px -239px;
width:400px;
height:24px;
}
.modTit1 .LPor{
float:left;
padding-left:14px;
font-size:14px;
}
.modTit1 .R{
float:right;
padding-right:15px;
}
.TopTit{ font-size:14px; padding-left:18px;}
.modTit1 .R h2 a:link{ color:#7b65c6; font-weight:normal;}
.modTit1 .R h2 a:visited{ color:#7b65c6; font-weight:normal;}
.modTit1 .R h2 a:hover{ color:#7b65c6; font-weight:normal;}
.modTit1 .R h2 a:active{ color:#7b65c6; font-weight:normal;}
.modTit1 .R .h2bg a:link{ color:#000;}
.modTit1 .R .h2bg a:visited{ color:#000; font-weight:normal;}
.modTit1 .R .h2bg a:hover{ color:#000; font-weight:normal;}
.modTit1 .R .h2bg a:active{ color:#000; font-weight:normal;}
/*网店帮助 + 友情链接*/
.help{ clear:both; padding-top:10px;}
.links{padding:20px 0;margin:0 auto 8px 8px;}
.links img{width:88px;height:31px;border:1px solid #ccc;}
.help dl{float:left;padding:5px;width:140px;}
.help dl dt{color:#4f4f4f;font-weight:700;background: url(images/help.gif) no-repeat left;padding-left:24px; height:24px; line-height:24px;}
.help dl dd{background: url(images/newlist.gif) no-repeat 15px 8px;padding-left:14px;}
.help dl dd a{padding-left:12px; color:#666;}
.help dl dd a:hover{padding-left:12px; color:#000;}
.foot{ background-color:#ececec; height:30px; line-height:30px;}
.banq{ width:700px; padding:30px 0;}
.banqlogo{width:200px; background:url(images/logo1.gif) no-repeat right; height:100px;}

/*单个商品外围框架（此方法在火狐和ie8下面会产生3px边距）*/
.goodsbox{
width:167px;
min-height:1px;
display: -moz-inline-stack;
display: inline-block;
text-align:center;
vertical-align: top;
zoom:1;
*display:inline;
_height:1px;
background:url(images/goodsright.gif) no-repeat right center;
padding-right:0 3px 0 5px;
}
.goodsbox .imgbox{
width:155px;
margin:0 0 5px 0;
overflow:hidden;
}
#ECS_ORDER_QUERY{ color:#808080;}
#ECS_ORDER_QUERY a{ color:#000; text-decoration: underline;}

/*销售排行*/
#top10{background-color:#fafafa;}
#top10 li{
cursor:pointer;
padding:3px 10px;
border:1px solid #ccc;
margin:3px 0px;
background:url(images/TopDot.gif) no-repeat right;
}
#top10 .first{
color:#000;
}
#top10 li .last{
color:#000;
background:url(images/TopDot3.gif) no-repeat right 7px;
background-color:#fafafa;
display:none;
}
#top10 li .last a{
color:#000;
}
#top10 li .last .imgbox{
background:#fff;
margin:8px;
text-align:center;
}
#top10 li .last .imgbox img{
width:100px;
height:100px;
margin:7px 0 7px 0;
margin-bottom:4px\9;
*margin-bottom:7px;
_margin-bottom:7px;
}
#top10 li.cur .first{
display:none;
}
#top10 li.cur .last{
display:block;
}
.GoodBlank ul{ background-color:#fff;}
/*新品，热卖，团购，拍卖，分类及品牌下的商品*/
.R h2{
float:left;
color:#fff;
font-size:12px;
padding:0 10px;
background:url(images/h2line.gif) no-repeat 0 2px;
background:url(images/h2line.gif) no-repeat 0 4px\9;
*background:url(images/h2line.gif) no-repeat 0 4px;
}
.R h2 a,.R h2 a:visited{color:#fff; font-weight:bold;}
.R .h2bg,.R .h2bg a,.R .h2bg a:visited{
color:#e5d7d6; font-weight:100;
}
.new .goodsbox{
width:180px;
margin:12px 0;
*margin:0 9px 12px 9px;
}
.new .goodsbox .imgbox{ width:184px; text-align:center;}
.new .more{
margin:8px 0 10px 8px;
}
/* 商品详情 */
.GoodsDetails{ border-top:1px solid #000;}
.goodImg{
width:487px;
background:url(images/goodimg.gif) no-repeat center top;
}

.goodImg .imgInfo{
border:1px solid #6a6969;
height:330px;
width:430px;
line-height:320px;
text-align:center;
margin:0px auto;
overflow:hidden;
margin-top:30px;
}
.goodImg .imgInfo img{
*margin-top: expression(( 300 - this.height ) / 2);
text-align:center;
vertical-align:middle;
}
.picture{
margin-top:18px;
text-align:left;
padding-left:10px;
background-color:
}
.picture img{
width:46px;
height:46px;
cursor:pointer;
margin:0 3px;
border:1px solid #bfbfbf;
}
.picture img.onbg{
background:url(images/bg_pic.gif) no-repeat 0 0;
padding:8px 2px 2px 2px;
}
.picture img.autobg{
background:url(images/bg_pic_1.gif) no-repeat 0 0;
padding:8px 2px 2px 2px;
}
.goodImg .up{ width:300px; padding-top:10px; margin-right:50px;}
.GoodsDetails .goodTextInfo{
width:289px;
font-size:12px;
line-height:24px;
color:#424242;
}
.fontg{ color:#9b9a9a;}
.GoodsDetails .goodTextInfo li{ float:left; line-height:24px; width:49%; padding-left:2px;}
.GoodsDetails .goodTextInfo .Points{ background:url(images/line.gif) repeat-x bottom; padding-left:5px; clear:both; width:100%;}
.GoodsDetails .goodTextInfo li img{ vertical-align:middle;}
.GoodsDetails .goodsName{
position:relative;
font-family:"黑体";
font-size:18px;
font-weight:300;
background-color:#000;
padding:6px;
line-height:22px;
color:#cdcdcd;
_margin-right:-5px;
margin-top:-1px;

}
.Goodpromotion{
background:#f6f6f6;
border:1px solid #e8e8e8;
padding:4px;
margin:5px 0;
}
.GoodBuy{
background:#fffee6;
border:1px solid #e7dbb1;
padding:4px;
margin:5px 0;
}
.action{
clear:both;
margin:5px auto;
padding-top:4px;
}
/*商品描述等标签*/
.tagtitw{
background:url(images/sian.gif) no-repeat bottom right;
position:relative;
right:0px;
}
.tagTit{
border-bottom:1px solid #c8c8c8;
font-weight:bold;
background:url(images/tith2.gif) repeat-x;
margin-right:1px;
_top:10px;
}
.tagTit h2{
float:left;
padding:5px 25px 0 25px;
font-size:14px;
height:36px;
color:#292929;
line-height:40px;
background:url(images/tagTit.gif) no-repeat 0 0;
position:relative;
bottom:-1px;
_bottom:-1px;
}
.tagTit h2 span{
display:block;
height:41px;
overflow:hidden;
}
.tagTit h2 span.R{
width:10px;
background:url(images/tagTit.gif) no-repeat -70px -49px;
position:absolute; right:-1px; top:0px;
}

.tagTit .h2bg{
font-weight:100;
padding:5px 25px 0 25px;
color:#555;
font-weight:bold;
height:25px;
line-height:25px;
margin-top:10px;
border-left:1px solid #c8c8c8;
background:none;
}
.tagTit .h2bg span{
display:none;
}

#goods_v,.bought{
border:1px solid #d1d1d1;
border-top:none;
padding:10px;
overflow:hidden;
line-height:22px;
}
.PublicTit{
border-bottom:1px solid #c8c8c8;
bottom:1px;
font-weight:bold;
}
.PublicTit h2{
float:left;
padding:5px 25px 0 25px;
font-size:14px;
height:36px;
color:#292929;
line-height:40px;
background:url(images/tagTit.gif) no-repeat 0 0;
position:relative;
bottom:-1px;
_bottom:-5px;
}

.PublicTit h2 span.R{
width:10px;
background:url(images/tagTit.gif) no-repeat -94px -49px;
position:absolute; right:-1px; top:0px;
}
.PublicTit h2 span{
display:block;
height:41px;
overflow:hidden;
}


/*评论*/
.commentsTit{
border-top:1px dashed #e1ebfa;
border-bottom:1px dashed #e1ebfa;
background:#f8fbff;
height:18px;
padding:5PX 15px;
}
.commentsTit img{
position:relative;top:3px;
}
.commentsContent{
text-indent:20px;
}
.re_content{
text-indent:0px;
background:#f7f9f4;
border:1px solid #eef9df;
padding:10px;
margin:10px 0;
}
.captcha{
padding-left:12px;
}
.captcha input{
position:relative; left:5px;
}
.captcha img{
position:relative; top:5px;
}
.commtitle{
font-size:14px;
font-weight:bold;
padding:5px 0 0 50px;
height:26px;
border-bottom:1px solid #a9a9a9;
background:url(images/bg.gif) no-repeat -51px -153px;
}

/*属性筛选*/
.attrbox h2{
height:26px;
line-height:26px;
font-size:14px;
padding-left:10px;
background-color:#34332f;
color:#fff;
}
.attrbox .attrcontent{
background:#fff;
margin:0 3px 3px;
padding:10px;
}
.attrbox .screeBox{
border-bottom:1px solid #ddd;
padding:8px 0;
}

.attrbox .screeBox h3{ background:url(images/sx.gif) no-repeat right; margin-right:9px; float:left; height:32px; line-height:32px;}
.attrbox .screeBox h3 span{ background:url(images/sxl.gif) no-repeat left; text-align:center; height:32px; padding:10px;}
.attrbox .screeBox p{ line-height:22px; padding-top:4px;}
.attrbox .screeBox p span {background:#e2e0e0;padding:5px 7px;color:#000;font-weight:bold;}
.goodsTitle{
background:#34332f;
line-height:33px;
height:33px;
}
.CarTitle{
background:#747371;
line-height:28px;
height:28px;
padding-left:10px;
}
.goodsTitle span{ background:url(images/tagTit.gif) no-repeat 10px -180px; width:30px; padding-left:30px; font-weight:bold;}
.sort{
padding-right:10px;
font-size:12px;
font-weight:100;
line-height:33px;
vertical-align:middle;
margin-top:3px;
border-bottom:1px solid #b9b9b9;
_padding-bottom:5px;
}
.sort img{vertical-align:middle;}
.sort select{
_margin-top:5px;
}
.sort .go{
*position:relative;top:-3px;
}
.modify{
float:right;
margin:8px 10px 0 0;
}

.cateGoodList{
border-bottom:1px solid #efeeee;
margin-bottom:8px;
padding:0 10px;
}
.cateGoodList li{
float:left;
padding:5px 0;
}
.cateGoodList li.thumb{
margin-right:10px;
}
.cateGoodList li.thumb img{
width:110px;
height:110px;
}
.cateGoodList li.goodsText{
width:380px;
margin-right:20px;
}
.cateGoodList li.collect{
float:right;
}
.grid .goodsbox{
width:190px;
padding:5px 0;
margin-bottom:8px;
*margin:0 3px 8px 2px;
}
.grid .goodsbox .imgbox{
width:187px;
text-align:center;
}
.cateTit{
border:3px solid #b0320b;
padding:3px 10px;
color:#000;
font-size:14px;
font-weight:bold;
}
.catebox li{
border-bottom:1px solid #dbdbdb;
font-weight:bold;
padding:6px 0;
}

这个模板最终是更改商品图片和边框之间的大小可以解决，具体改哪个文件，忘记了，当时是已经解决好了。后来这个模板没用，

非常感谢楼上各位的回答。

如果以后有朋友遇到这类问题，可以搜索更改图片 和框之间的距离大小。

遇到楼主一样的问题了，我是想通过删除首页某些模块的方法来解决这个问题，但是没有成功，后来也是改了CSS的。