首页html列表图片横排

html列表图片横排

时间: 2024-10-29 22:15:13 浏览: 11

html使用图片、列表和CSS实现图文横排-具有滚动效果

在HTML中创建一个图片横排展示的列表通常使用`<ul>`标签表示无序列表，然后配合`<li>`元素以及`style`属性来设置布局。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <style> .horizontal-list { list-style-type: none; /* 隐藏默认的项目符号 */ padding: 0; margin: 0; display: flex; /* 使用Flexbox布局 */ justify-content: space-between; /* 图片间留有空隙 */ } .horizontal-list li { width: calc(33.33% - 20px); /* 如果有3列，每列宽度占总宽度的1/3减去一些内边距 */ overflow: hidden; /* 当图片超过容器宽度时隐藏多余部分 */ text-align: center; position: relative; box-sizing: border-box; } .horizontal-list img { height: auto; /* 自动调整高度以保持宽高比 */ max-width: 100%; /* 图片最大宽度不超过其父元素 */ display: block; } </style> </head> <body> <ul class="horizontal-list"> <li><img src="image1.jpg" alt="图片1"></li> <li><img src="image2.jpg" alt="图片2"></li> <li><img src="image3.jpg" alt="图片3"></li> </ul> </body> </html> ``` 在这个示例中，`.horizontal-list`设置了Flexbox布局，并将图片均匀地分布在一行上。每个`li`元素的宽度分配给图片，图片会自动适应容器大小。

阅读全文