請教用html的li標簽如何做到商品展示，例如京東的商品展示是用的li標簽，壹排顯示4個，循環很多排？

<ul>

<li>

<img src="img/coffee.png" alt="" />

<p>這是壹杯咖啡</p>

<p>?34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>這是壹杯咖啡</p>

<p>?34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>這是壹杯咖啡</p>

<p>?34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>這是壹杯咖啡</p>

<p>?34 : 00</p>

</li>

<li>

<img src="img/coffee.png" alt="" />

<p>這是壹杯咖啡</p>

<p>?34 : 00</p>

</li>

</ul>

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+=`

<li>

<img src="${i.img}" alt="" />

<p>${i.title}</p>

<p>?<span>${i.price}</span> : 00</p>

</li>

`;

$("ul").html(html);//把遍歷的內容添加到ul裏面

}

大概就是這樣，不知道妳看不看得懂