请教用html的li标签如何做到商品展示，例如京东的商品展示是用的li标签，一排显示4个，循环很多排？

你先给一个div用来包住内容的，设置宽高，然后在div放一个ul，ul里放4个li，li的宽度就是25%，或者可以写具体的值

• 
  
  

  这是一杯咖啡

  
  

  ¥34 : 00

  
  


• 
  
  

  这是一杯咖啡

  
  

  ¥34 : 00

  
  


• 
  
  

  这是一杯咖啡

  
  

  ¥34 : 00

  
  


• 
  
  

  这是一杯咖啡

  
  

  ¥34 : 00

  
  


• 
  
  

  这是一杯咖啡

  
  

  ¥34 : 00

  
  

css：
ul{
width: 100%;
}
li{
list-style:none;
width: 20%;
height:300px;
border:1px solid #000;
float:left;
}
我是设置的5个就可以看到换行的效果了，如果觉得样式可以就在js里设置一个数组，复制一个li的内容，然后把li全部注释，然后在js里写循环遍历
var list=[
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'},
{img:'img/coffee.png',title:'这是一杯咖啡',price:'34'}
];
var html=""; //声明一个空变量来接收拼接的内容
for(var i of list){
//拼接内容
html+=`

${i.title}

¥${i.price} : 00

`;
$("ul").html(html);//把遍历的内容添加到ul里面
}
大概就是这样，不知道你看不看得懂

• 这个第一个li


• 这个第二个li


• 这个第三个li


• 这个第四个li


• 这个第五个li


• 这个第六个li


• 这个第七个li


• 这个第八个li


• 这个第九个li


• 这个第十个li

• 这个第一个li


• 这个第二个li


• 这个第三个li


• 这个第四个li


• 这个第五个li


• 这个第六个li


• 这个第七个li


• 这个第八个li


• 这个第九个li


• 这个第十个li

• 这个第一个li


• 这个第二个li


• 这个第三个li


• 这个第四个li


• 这个第五个li


• 这个第六个li


• 这个第七个li


• 这个第八个li


• 这个第九个li


• 这个第十个li

• 这个第一个li


• 这个第二个li


• 这个第三个li


• 这个第四个li


• 这个第五个li


• 这个第六个li


• 这个第七个li


• 这个第八个li


• 这个第九个li


• 这个第十个li

设置li的宽度，假如商品整个的宽度为600px，那么li设置145px，再设置上下左右间距，浏览器就会自动一排显示4个 li {width:145px;margin:5px;float:left;}

我觉得那个用的是div或者table

设置多个，然後css调float位置

其实这个就是把li标签浮动或者display:inline-block;在设置下宽之类的需要的属性，就可以了~