html - 如何使不间断的水平菜单合理化？

所以我想证明水平菜单的合理性。

它看起来应该像这样：



所以我尝试了这个：

ul {

    &.nav-fixed {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    position:  relaiv;
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-collapse: collapse;
    }


    li {
        a {
          display: inline-block;
          margin: 0;
          font-weight: normal;
          color: $red;

        }
    }

}

而且有效。一切都在中心，左边或右边没有空格。
我的问题是“第一项”和“最后一项”被破坏了。第二个单词现在换行了。

我不知道该如何解决。我加宽度：100％；对我的li {}而言，但现在它不再是中心。

最佳答案

将white-space: nowrap添加到任何选择器（ul，li或a）中，使单词保持一行。

关于html - 如何使不间断的水平菜单合理化？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45170341/