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

Question

我试图让我的导航栏水平并且居中。现在，它们都被微笑到了网站的右侧。如何控制条的位置？
另外，为什么我不能把我所有的CSS都放在#nav下（为什么我需要#nav ul li等？）

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要不同的css选择器，因为并非所有样式都应用于周围的容器#nav，而是应用于内部的某些元素。使用纯CSS，无法嵌套规则。如果您正在寻求嵌套，请查看LESS或SASS（DuckDuckGo是您的朋友）。

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

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;