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

使用html和css无法在水平方向显示菜单

1 个答案: