html两个无序列表并排
时间: 2023-07-11 07:35:00 浏览: 294
HTML教程:无序列表
可以使用CSS的display属性实现两个无序列表并排显示。
HTML代码示例:
```
<div class="list-container">
<ul class="list1">
<li>列表1-1</li>
<li>列表1-2</li>
<li>列表1-3</li>
</ul>
<ul class="list2">
<li>列表2-1</li>
<li>列表2-2</li>
<li>列表2-3</li>
</ul>
</div>
```
CSS代码示例:
```
.list-container {
display: flex;
flex-wrap: wrap;
}
.list1, .list2 {
flex-basis: 50%;
}
```
以上代码中,将两个无序列表放在一个容器中,使用display属性设置容器为flex布局,并使用flex-wrap属性进行换行处理。然后使用flex-basis属性设置列表的宽度为50%,使它们平分容器的宽度。这样就可以实现两个无序列表并排显示了。
阅读全文