如何使水平菜单不间断地对齐？

Question

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

它应该是这样的：

所以我尝试了这个：

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;

        }
    }

}

它奏效了。一切都居中，左右没有空格。我的问题是 "First Item" 和 "Last Item" 被破坏了。第二个词现在换行。

我不知道如何解决这个问题。我将 width: 100%; 添加到我的 li{} 但它不再是中心了。

Answer 1

将 white-space: nowrap 添加到您的任何选择器（ul、li 或 a），以便您的文字保持在一行中。

Answer 2

尝试将 white-space: nowrap; 添加到 li

如何使水平菜单不间断地对齐？

How to make justify a horizontal menu without breaks?

html

css

sass

menuitem