使用CSS类会导致问题

Question

我为我的导航菜单设置了.nav 类，但是当我使用它时，它似乎会导致问题，当我删除.nav并只留下{{1}时它修复了它，但也存在边际问题。

问题出在底部我评论/ 问题 / http://jsbin.com/fupewijame/1/

您必须删除.nav

ul li

并将其更改为

.nav ul li{
    width: 100%;
} 

有点修复它，但你可以看到一个保证金错误。我也必须使用ul li{ width: 100%; } class ，因为我不想让它全球化。请帮助我看不到错误

Answer 1

而不是：

.nav ul li{
width: 100%;
}

使用：

.nav li{
        width: 100%;
        margin-bottom: 0;
    } 

如果您不想有保证金

.nav{
    margin: 0;
    padding: 0;
}

Answer 2

我不完全确定你喜欢100％宽度的样子。如果您提供更多信息，我可以进一步提供帮助。

但是，我注意到一些可能会让你的CSS感到困惑的事情。

1）由于浮动应用于列表项，高度显示为“0”。当您将浮动应用于项目时，它们将从文档的正常流程中删除。

要解决，请先尝试删除此内容：

.nav li {
    float: left;
}

2）大多数浏览器为ol和ul添加默认填充和/或边距

我建议您重置，然后尝试设置样式。

RESET：

ul {
  margin: 0;
  padding: 0;
}

目标重新设计：

.nav {
  margin: /* your style here */;
  padding: /* your style here */;
}

Answer 3

这个

.nav ul li{
    width: 100%;
} 

说：

• 类.nav
的元素
• 带有ul
类型的后代
• 带有li
类型的后代

由于.nav是ul的一个类，而不是ul的祖先，您应该使用

ul.nav li {
   width: 100%;
} 

代替：

• ul类型的元素.nav
• 带有li
类型的后代

编辑：对于保证金问题，您应该使用position: relative;代替position: absolute;，如果不完全了解其工作方式，则不应使用