左右两侧等距 CSS 菜单刷新答案

【问题标题】：Equidistant CSS Menu Flush on Left and Right sides左右两侧等距 CSS 菜单刷新
【发布时间】：2015-05-21 09:01:56
【问题描述】：

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

Link1  Link2  Link3  Link4
__________________________

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

现在我正在使用边距百分比并根据我的断点进行调整。这有点工作，但它似乎不是一个优雅的解决方案。有什么想法吗？

【问题讨论】：

向我们展示您的代码..

标签： html css menu

【解决方案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/

【讨论】：