html - 在 UL 中水平居中导航的问题

Question

无论我制作什么尺寸，列表项似乎都卡在 UL 的左侧。它看起来在某些屏幕上居中，但在较大的屏幕上却不居中。 Float:right 是唯一适用于我的屏幕尺寸的东西，但如果您调整窗口大小时它不会保持居中。

网站:http://www.lotusroomofboca.com/

HTML:

<div id="header">
<img id="logo" src="images/logo.png" alt="Lotus Room logo">
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="our_tea.html">Our Tea</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="learn_more.html">Learn More</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

CSS:

#header {position:fixed; 
     width:100%;
     background-color:rgba(244,243,243,1);
     z-index:100;
     -webkit-box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94);
     -moz-box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94);
     box-shadow: 0px 10px 60px 0px rgba(219,219,216,0.94);
    }     

#nav {list-style:none;
      margin:auto;
      text-align:center;
      width:960px;
      padding-top:30px;
      padding-bottom:20px;
      float:right;}

#nav a {text-decoration:none;
      text-align:center;
      display:block;
      color:#5c5c5c;
      font-family:'Avenir';
      font-size:12px;
      border-right:thin grey solid;
      float:left;
      width:10%;
      } 

#nav li:last-child a {border-right:none;}     

#nav a:hover {color:#7b8c6f; 
              transition:ease 0.5s;}

Answer 1

这是一个 FIDDLE

将此配置用于 <ul>

<ul id="nav">
  <li><a href="index.html">Home</a>
  </li><li><a href="our_tea.html">Our Tea</a>
  </li><li><a href="menu.html">Menu</a>
  </li><li><a href="learn_more.html">Learn More</a>
  </li><li><a href="contact.html">Contact</a>
  </li>
</ul>

---

和这个CSS

#nav li {
  text-align:center;
  display:inline-block;
  color:#5c5c5c;
  font-family:'Avenir';
  font-size:12px;
  border-right:thin grey solid;
  width:10%;
}
#nav li:last-child {
  border-right: none;
} 
#nav li a {
  text-decoration: none;
  color: #000;
  transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  -webkit-transition: color 0.5s ease;
}
#nav li a:hover {
  color:#7b8c6f;
}