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

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

所有列表项当前都向左浮动，并没有填满导航栏的整个宽度。我在这里读过很多关于类似问题的答案，但都没有用。我希望每个项目占用相等的空间（这样较长的标题在其项目中的填充空间会更少）。下面是一个示例，我在下面提供了一个大致的屏幕截图：

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>

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

谢谢你的帮助

所需解决方案：

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

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

---

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

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

---

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

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

---

我真是个笨蛋！同样感谢您的帮助，Chad是第一个加入文本对齐的人，但也谢谢！