等距CSS菜单上的左，右两侧

Question

我试图环绕我的大脑如何可以完成以下响应菜单冲洗：

Link1 Link2 Link3 Link4 
__________________________ 

第一个链接需要左对齐和最后一个环节的需求与容器的右边缘齐平。导航容器有一个边框底部，所以Link1和Link4应该与边框齐平。

现在我正在使用保证金正确的百分比，并用我的折点进行调整。这有点有用，但它似乎不是一个优雅的解决方案。有什么想法吗？

Answer 1

我真的不认为有一种方法可以对列表中的所有链接执行此操作。我会采取最后和第一个链接跨越列表的方法，然后居中对齐中间分组。根据菜单项中内容的上下文，这样做并不是非语义的。

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> 

CSS：

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; 
} 

看到这个例子中，我放在一起：https://jsfiddle.net/adw5hwq7/2/