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/

放在一起

左侧和右侧的等距CSS菜单冲洗

1 个答案: