要实现不同ULs水平对齐的效果,可以使用CSS中的flexbox布局。
HTML代码示例:
- Item 1
- Item 2
- Item 3
- Item A
- Item B
- Item C
- Item D
- Item X
- Item Y
CSS代码示例:
.container {
display: flex;
justify-content: space-between;
}
.list {
list-style-type: none;
padding: 0;
margin: 0;
}
上述代码中,我们使用display: flex
将.container
的子元素变为flex容器,并使用justify-content: space-between
设置每个UL元素在水平方向上均匀分布。
注意:以上代码只是示例,实际情况根据需求进行调整。