在html和css中使用响应等距离导航菜单对齐多线

Question

论坛新手！ 我认为在发布之前我已经看了很多但是如果之前已经解决了这一点请原谅。

尝试在html和css中构建菜单。我的要求是使用多行构建一个响应式菜单，但列表项应该彼此相等。此外，菜单的第一个列表项应与容器保持对齐，最后一个列表项应与容器右对齐。反应很重要！任何帮助将不胜感激。

HTML ...

  <nav class="top-nav">
    <ul >
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#"> lorem &<br> ipsums</a></li>
        <li><a href="#"> lorem <br> ipsums</a></li>
        <li><a href="#">lorem & <br> ipsums</a></li>
        <li><a href="#">lorem <br> ipsum ipsum</a></li>
        <li><a href="#">Lorem<br> ipsum ipsum</a></li>
        <li><a href="#">lorem lorem <br/>ipsum & ipsum</a></li>
        <li><a href="#">Loerm Ipsum</a></li>
    </ul>
</nav>

的CSS ..

    .top-nav{
        max-width: 1166px;
        width: 100%;
        /*border:1px solid orange;*/
        line-height: 1em;
        margin: 0 auto; 
        height: auto;
        text-align: justify;
    }

    .top-nav ul{
        padding:0;
        margin: 0;
        vertical-align: middle;
        /*border:1px solid green;*/
        font-family: roboto;
    }

    .top-nav li{
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        margin-right: 4.92%;
    }

    .top-nav li:last-child{
        margin-right: 0;
    }