使用CSS类导致问题

设置我.nav类我的导航菜单，但是当我使用它，它似乎会导致问题，当我删除.nav和离开只是ul li它修复它，但也有一个保证金的问题。使用CSS类导致问题

的问题是我评论/ 问题/ http://jsbin.com/fupewijame/1/

您必须删除.nav

.nav ul li{ 
    width: 100%; 
}

，并更改为

ul li{ 
    width: 100%; 
}

这有点儿修复它的底部但你可以看到一个保证金错误。我也必须使用.nav类，因为我不希望它是全球性的。请帮我看不到的bug

代替：

.nav ul li{ 
width: 100%; 
}

使用：

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

，如果你不希望有一个保证金

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

2015-02-24 05:22:52

谢谢，但仍然存在误差？也有任何理由，为什么这有效？ – GoogleFailedMe 2015-02-24 05:38:01

你的意思是你不想在你的列表项之间留有余量？ – 2015-02-24 05:41:45

我的意思是边缘和列表顶部的边距。我希望它连接并与显示菜单栏对齐 – GoogleFailedMe 2015-02-24 05:53:32

我我不完全确定你希望它看起来像100％的宽度。如果您提供更多信息，我可以进一步提供帮助。

但是，我注意到一些可能会混淆CSS的东西。

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

来解决，首先尝试删除此：

.nav li { 
    float: left; 
}

2）大多数浏览器添加默认填充和/或保证金OL和UL

我建议你重置，然后尝试风格。

RESET：

ul { 
    margin: 0; 
    padding: 0; 
}

TARGET RE式：

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

2015-02-24 05:50:09

这

.nav ul li{ 
    width: 100%; 
}

是说：

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

ul.nav li { 
    width: 100%; 
}

代替：

编辑：对于保证金问题，您应该使用position: relative;代替position: absolute;，不应该，如果没有完全被使用意识到它是如何工作的

2015-02-24 09:43:49

回答