使用html和css在水平方向上显示铁路超高菜单

我正在尝试创建一个水平格式的菜单栏。我已经尝试过使用display:inline块，但仍然有问题。我甚至尝试过使用display:inline，但它似乎无法解决问题。谁能帮我解决这个问题。

你是用scss写的吗？我猜您的嵌套已关闭，因为它在常规css中运行良好：

.navigation {
padding: 0;
margin: 0;
background: #333;
position: fixed;
top: 0;
z-index: 999;
width: 100%;

li {
    display: inline-block;
    padding: 5px 10px;

    a { 
        color: #e1e1e1;
        text-decoration: none;

        &:hover{
            color: lighten(#e1e1e1, 20%);

        }
    }
}

---

看起来您缺少将关闭

.navigation

的最后一个

}

。尝试更新：这就是答案：

为您的代码提供html或JSFIDLE或心灵感应礼物，请这是指向JSFIDLE的链接。OP确实错过了

}

关闭

导航的声明。他的小提琴也没有将语言（可在左侧边栏中选择）设置为
SCSS
（默认为
CSS
）。我甚至没有意识到你可以在jsfiddle中切换到SCSS，感谢tip@user3536613没问题。只需将此标记为正确，以备将来使用
.navigation {
  padding: 0;
  margin: 0;
  background: #333;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}

li {
  display: inline-block;
  padding: 5px 10px;
}

a { 
  color: #FFF;
  text-decoration: none;
}

a:hover{
   color: lighten(#e1e1e1, 20%);
}