元素分别定义样式，可以使用以下代码：
nav ul {
list-style: none;
}
nav ul li {
display: inline;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
实现复杂列表布局的技巧
1. 利用Flexbox实现水平排列和文本垂直居中
Flexbox布局是CSS中用于创建灵活布局的强大工具。通过使用Flexbox，可以轻松实现列表项的水平排列和文本的垂直居中。
以下是一个示例：
ul.flex-list {
display: flex;
justify-content: center;
align-items: center;
}
ul.flex-list li {
margin: 10px;
padding: 5px;
border: 1px solid #ccc;
}
HTML结构：
2. 利用Grid布局创建混合列数的网格布局
CSS Grid布局允许创建具有混合列数的网格布局，这对于复杂的列表布局非常有用。
以下是一个示例：
ul.grid-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 10px;
}
ul.grid-list li {
padding: 10px;
border: 1px solid #ccc;
}
HTML结构：
- Item 1
- Item 2
- Item 3
- Item 4
- Item 5
3. 精准控制嵌套列表的样式
对于嵌套列表，可以利用CSS选择器精准控制各级列表的样式，营造层次感。
以下是一个示例：
ul.nested-list > li {
font-weight: bold;
}
ul.nested-list > li > ul > li {
font-style: italic;
}
HTML结构：
- Parent 1
- Child 1
- Child 2
- Grandchild 1
- Grandchild 2
- Parent 2
总结
通过掌握CSS嵌套技巧，开发者可以轻松实现复杂的列表布局。结合Flexbox、Grid布局和精准的CSS选择器，可以创造出既美观又实用的列表元素，提升用户体验和视觉效果。不断实践和创新，你将发现更多CSS列表设计的奥秘。