0

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

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

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

谢谢你的帮助！

所需的解决方案：

在此处输入图像描述

4

2 回答 2

1

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

#nav li {
      float: left;
      width:25%;
}
于 2015-02-11T02:20:27.747 回答
1

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

#nav li {
  float: left; 
  width:25%;
  text-align:center;
}
于 2015-02-11T02:24:27.417 回答