html如何让一行显示5张图片（代码怎么写）

现在位置：首页 > 网站设计 > html如何让一行显示5张图片（代码怎么写）

html如何让一行显示5张图片（代码怎么写）

蓝叶网站设计 2022-12-03 464 0评论

在做页面设计布局时，为了美观好看，都会采用一些图片列表的布局来展示一些列表内容，这时我们就需要一行显示5张图片或其他数量的图片，那么html如何让一行显示5张图片？代码怎么写？

html如何让一行显示5张图片？

一行显示多张图片，我们可以使用css的float属性来进行浮动布局，这是老方法这里就不说了，今天蓝叶分享的是css3的新方法flex属性，元素使用display:flex属性就可以使子元素并列显示，这个css3属性是非常香的，如果想要一样显示5张图片或者指定数量的图片，可以给父元素加个flex-wrap:wrap属性，之后在子元素css样式里固定下每个层的数值就可以了。

html一行显示5张图片代码怎么写？

下面蓝叶直接贴出代码，修改下图片地址，直接复制即可使用。

<style>
.flex-wrap{width:800px;margin:0 auto;box-sizing:border-box}
.flex-wrap ul{list-style:none;display:flex;flex-wrap:wrap;}
.flex-wrap ul li{list-style:none;width:calc(20% - 5px);margin:0 5px 5px 0;}
.flex-wrap ul li img{width:100%}
</style>
<div class="flex-wrap">
 <ul>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 <li><img src="图片网址" /></li>
 </ul>
</div>

评论一下分享本文赞助蓝叶