Html 左右两侧等距CSS菜单齐平

我正在努力思考如何完成以下响应菜单：

Link1  Link2  Link3  Link4
__________________________

第一个链接需要左对齐，最后一个链接需要与容器的右边缘齐平。导航容器具有边框底部，因此Link1和Link4应与边框齐平

---

现在我正在使用一个正确的百分比，并用我的断点调整它。这在某种程度上是可行的，但似乎不是一个优雅的解决方案。有什么想法吗？

老实说，我不认为有一种方法可以通过列表中的所有链接来做到这一点。我会采用最后一个和第一个链接位于列表之外的方法，然后将中间的分组居中对齐。根据菜单项中内容的上下文，这样做并不是不明智的

HTML:

<div class="menu-module" role="navigation"> 

    <span class="menu-module-link menu-module-link--first">Link 1</span>

    <ul class="menu-module-list">
        <li class="menu-module-link">Link 2</li>
        <li class="menu-module-link">Link 3</li>
        <li class="menu-module-link">Link 4</li>
    </ul> 

    <span class="menu-module-link menu-module-link--last">Link 5</span>

</div>

---

请参见我放在一起的示例：

向我们展示您的代码。。

html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.menu-module {
    border-bottom: 1px solid black;
    height: 50px;
    background: #EFEFEF;
    overflow: hidden;
}
.menu-module-list {
    padding: 0;
    margin: 0;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
.menu-module-link {
    display: inline-block;
}
.menu-module-link--first {
    float: left;
}
.menu-module-link--last {
    float: right;
}