html - 无法使用html和css水平显示菜单

Question

.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%);

        }
    }
}

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

Answer 1

你是用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: #FFF;
  text-decoration: none;
}

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

FIDDLE

看起来您遗漏了将关闭 .navigation 的最后一个 }。尝试更新:这就是答案:NEW FIDDLE