如何使列表项在无序列表（导航栏）中均匀分布

Question

我有一个导航栏，其中包含一个无序列表，其中包含4个列表项（导航栏上的项目）。

所有列表项目当前都浮动到左侧，并且没有填满导航栏的整个宽度。我在这里读到了类似问题的各种答案但无济于事。我希望每个项目占用相等的空间（因此较长的标题会在其项目中填充较少的内容）。这是jsFiddle demo，我在下面提供了大致我喜欢的截图：

HTML：

<ul id="nav">
      <li><a href="index.html">Home</a></li>
      <li><a href="selling.html">Products</a></li>
      <li><a href="businesses.html">About Us</a></li>
      <li><a href="contact/contact.html">Contact Us</a></li>
   </ul>

CSS：

#nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      font-size:1.4em;
      list-style: none;
    background-color: #1A810A;
border-bottom: 1px solid #544830;
border-top: 1px solid #236416;
}
   #nav li {
      float: left; }
   #nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      font-family:Garamond;
      color: #fff;
      border-right: 1px solid #ccc; }
   #nav li a:hover {
      color: #fff;
      background-color: #0A4901; }
   /* End navigation bar styling. */

   /* This is just styling for this specific page. */

   #wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; }
   h1 {
      font-size: 1.5em;
      padding: 1em 8px;
      color: #333;

      margin: 0; }
   #content {
      padding: 0 50px 50px; }

感谢您的帮助！

所需解决方案：

Answer 1

将每个列表项设置为宽度为25％：

#nav li {
      float: left;
      width:25%;
}

Answer 2

使每个项目占据列表的四分之一，并使文本居中：

#nav li {
  float: left; 
  width:25%;
  text-align:center;
}