在nav中让li并列
时间: 2024-09-12 22:10:46 浏览: 45
CSS实现带有小图片的LI图标列表菜单
在HTML的<nav>标签中,如果你想让<ul>(无序列表)内的<li>元素并列显示,通常会使用CSS来控制布局。以下是一个基本示例:
```html
<nav>
<ul class="horizontal-list">
<li>菜单项1</li>
<li>菜单项2</li>
<li>菜单项3</li>
</ul>
</nav>
<style>
.horizontal-list {
display: flex; /* 使用Flexbox布局 */
list-style-type: none; /* 隐藏默认的项目符号 */
justify-content: space-between; /* 列表项之间的间距均匀分布 */
}
</style>
```
在这个例子中,`.horizontal-list` 类设置了`display: flex;`使其变为弹性盒模型,`justify-content: space-between;`使得每个`<li>`元素之间有均匀的间隔。你可以根据需要调整样式,例如添加`flex-wrap: wrap;`来换行显示长列表。
阅读全文