如何将导航栏移动到其他位置？

Question

我正在尝试使导航栏保持水平和居中。 现在，所有内容都模糊在网站右侧。 如何控制酒吧的位置？
另外，为什么我不能将所有CSS都放在#nav下（为什么我需要#nav ul li等？）

 #nav{ width: 90%; text-align: center; font-size: 35px; text-align: center; } #nav ul li{ display: inline; height: 60px; text-align: center; } #nav ul li a{ padding: 40px; background: #25ccc7; color: white; text-align: center; } 

 <div id="nav"> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </div> 

Answer 1

你需要不同的CSS选择器，因为不是所有的款式都意味着被应用到周围的容器#nav ，但它里面的某些元素。 使用纯CSS时， 无法嵌套rules 。 如果您要嵌套，请查看LESS或SASS（ DuckDuckGo是您的朋友）。

您的列表项被稍微向右推，因为这是列表项的自然行为，除非您覆盖负责的CSS属性margin和/或padding （取决于浏览器）。 因此，只需将CSS中的列表项都重置为0 。

 #nav { background-color: #e8e8e8; width: 90%; font-size: 35px; text-align: center; margin: 0 auto; } #nav ul { display: inline-block; white-space: nowrap; margin: 0; padding: 0; } #nav ul li { display: inline; text-align: center; margin: 0; padding: 0; } #nav ul li a { padding: 40px; background: #25ccc7; color: white; text-align: center; } 

 <div id="nav"> <ul> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </div>