html列表图片横排
时间: 2024-10-29 12:15:13 浏览: 21
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`元素的宽度分配给图片,图片会自动适应容器大小。
阅读全文