html - 如何使列表项在无序列表(导航栏)中均匀分布

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

让每个元素占据列表的四分之一，并将文本居中:

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