Question

当我使用float: right向右移动导航栏时，按钮不再起作用;他们只是成为文本。

布局很好，但我的导航栏不再工作了。我尝试了保证金和浮动但不起作用。

我是新手，所以有人可以帮助我吗？非常感谢提前。

*
{
  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;         "-----> this command"
}
.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;
}

Answer 1

非常感谢他的快速回复！ HTML就是这样：

virtual

使用右侧浮动后，导航栏不再起作用

1 个答案: