使用float:right定位导航栏后按钮失效，仅显示文本求助

架构老林

2026-5-21

解决导航栏float:right后交互失效的问题

嘿，作为前端新手遇到这种问题太正常啦，咱们一起来把它搞定～

问题根源：CSS语法错误

仔细看你提供的代码，.main-nav的CSS规则里多了一行完全无效的内容："-----> this command"。浏览器解析CSS时遇到这种不符合语法的内容，会直接忽略当前选择器后续的所有规则，包括li、a的样式，还有hover、active这些交互效果。这就导致导航栏虽然布局看起来正常，但按钮的点击、悬停功能全失效，只能显示纯文本。

修正后的代码

把那行多余的内容删掉，修正后的完整CSS代码如下：

* { margin: 0; padding: 0; }
header { 
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0, 0, 0, 0.5)),url(achtergrond.jpg); 
    height: 100vh; 
    background-size: cover; 
    background-position: center; 
}
.main-nav { 
    list-style: none; 
    margin-top: 30px; 
    float: right; 
}
.main-nav li { display: inline-block; }
.main-nav li a { 
    color: white; 
    text-decoration: none; 
    padding: 5px 20px; 
    font-family: "Roboto",sans-serif; 
    font-size: 15px; 
}
.main-nav li.active a { 
    border: 1px solid white; 
    background-color: #272342; 
}
.main-nav li:hover { border: 1px solid white; }
.logo img { 
    -webkit-filter: invert(100%); 
    width: 150px; 
    height: auto; 
    float: left; 
}