制作3列列表可以使用HTML和CSS来实现。以下是一种常见的方法:
HTML代码:
<div class="container">
<div class="column">
<ul>
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</div>
<div class="column">
<ul>
<li>项目4</li>
<li>项目5</li>
<li>项目6</li>
</ul>
</div>
<div class="column">
<ul>
<li>项目7</li>
<li>项目8</li>
<li>项目9</li>
</ul>
</div>
</div>
CSS代码:
.container {
display: flex;
}
.column {
flex: 1;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
这段代码创建了一个包含3列的容器,每列中包含一个无序列表。通过设置display: flex;
,容器中的列会自动排列在一行。通过设置flex: 1;
,每列会平均占据容器的宽度。通过设置list-style-type: none;
和padding: 0;
,去除了列表的默认样式。通过设置margin-bottom: 10px;
,给每个列表项之间添加了一定的间距。
这样,你就可以根据需要在每个列的无序列表中添加项目,从而制作出一个3列列表。
领取专属 10元无门槛券
手把手带您无忧上云