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

Question

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

所有列表项当前都向左浮动，没有填满导航栏的整个宽度。我在这里阅读了类似问题的各种答案，但无济于事。我希望每个项目占用相等的 space（因此较长的标题将在其项目中填充较少）。这是一个 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;
}

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

How to make list items spread evenly within an unordered list (navigation bar)

html

css

list

unordered

nav