如何在导航栏中水平对齐三个项目？

<style>
    .nav-item {
        float: left;
        width: 33.33%;
    }
</style>

<div class="nav">
    <div class="nav-item">项目1</div>
    <div class="nav-item">项目2</div>
    <div class="nav-item">项目3</div>
</div>

<style>
    .nav {
        display: flex;
        justify-content: space-between;
    }
</style>

<div class="nav">
    <div class="nav-item">项目1</div>
    <div class="nav-item">项目2</div>
    <div class="nav-item">项目3</div>
</div>

<style>
    .nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
</style>

<div class="nav">
    <div class="nav-item">项目1</div>
    <div class="nav-item">项目2</div>
    <div class="nav-item">项目3</div>
</div>