html - 如何调整每个菜单项之间的菜单分隔符(文本之间的分隔线)？

Question

我无法弄清楚如何调整此网页上的水平菜单分隔符:amchaminternship.org/testimonials.html ，因为它需要看起来与此网页上的完全一样:amchaminternship.org/faq.html . Home 之前的分隔符需要去掉，每个分隔符之间的文本间距需要均匀。

如有任何帮助，我们将不胜感激，在此先感谢您。

.menu { background: url(images/menu-tail.gif) repeat-x 0% 0%;
        margin: 0; padding: 0;
        width: 100%;
        height: 43px;
	position: relative;
	z-index: 1;
        top: 175px;
	right: 0; } /* reset your <ul>s */
        .menu-item { background: url(images/menu-divider.gif) no-repeat 0% 50%;
        display: block;
        line-height: 40px;
	float: left;
        font-size: 1.083em;
        position: relative; /* relative so the submenu position will work */
        margin: 0 20px;
    }
        .menu-submenu {
	    margin: 0; padding: 0;  /* reset your <ul>s */
            position: absolute;
            left: -9999em; top: -9999em; /* send it offscreen */
        }
        .menu-item:hover > .menu-submenu {
            left: auto; top: auto; /* bring it back onscreen on :hover */
        }

            .menu-submenu-item { display: block; }
    .menu:after { /* clearfix */
        content: "";
        display: table;
        clear: both;
    }

<ul class="menu">
  <p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
  <li class="menu-item"><a href="index.html">Home</a></li>
  <li class="menu-item"><a
 href="internship_program.html">Internship Program</a>
    <ul class="menu-submenu">
      <li class="menu-submenu-item"><a href="faq.html">FAQ</a></li>
      <li class="menu-submenu-item"><a
 href="testimonials.html">Testimonials</a></li>
    </ul>
  </li>
  <li class="menu-item"><a href="alumni.html">Alumni</a></li>
  <li class="menu-item"><a href="donations.html">Donations</a></li>
  <li class="menu-item"><a href="who_we_are.html">Who
We Are</a></li>
  <li class="menu-item"><a href="photo_gallery.html">Photo
Gallery</a></li>
  <li class="menu-item"><a href="contact_us.html">Contact
Us</a></li>
</ul>
</div>

Answer 1

您可以像这样从第一个菜单项中删除分隔线背景:

.menu-item:nth-of-type(1) {
  background: none;
}

要使菜单项居中并在它们之间填充 2em，请添加以下样式:

padding: 0em 2em;

此外，您不需要在 menu-item 上进行相对定位。

代码:

a {
  color: white;
}

.menu {
  background: url(http://amchaminternship.org/images/menu-tail.gif) repeat-x 0% 0%;
  margin: 0; padding: 0;
  width: 100%;
  height: 43px;
  position: relative;
  z-index: 1;
  top: 175px;
  right: 0;
}

.menu-item { 
  background: url(http://amchaminternship.org/images/menu-divider.gif) no-repeat 0% 50%;
  display: block;
  line-height: 40px;
  float: left;
  font-size: 1.083em;
  padding: 0em 2em;
}

.menu-item:nth-of-type(1) {
  background: none;
}

.menu-submenu {
  margin: 0;
  padding: 0;
  position: absolute;
  left: -9999em;
  top: -9999em;
}

.menu-item:hover > .menu-submenu {
  left: auto;
  top: auto;
}

.menu-submenu-item { 
  display: block; 
}

.menu:after {
  content: "";
  display: table;
  clear: both;
}

<ul class="menu">
  <p style="margin-top: 0pt; margin-bottom: 0pt;"></p>
  <li class="menu-item"><a href="index.html">Home</a></li>
  <li class="menu-item"><a href="internship_program.html">Internship Program</a>
    <ul class="menu-submenu">
      <li class="menu-submenu-item"><a href="faq.html">FAQ</a></li>
      <li class="menu-submenu-item"><a href="testimonials.html">Testimonials</a></li>
    </ul>
  </li>
  <li class="menu-item"><a href="alumni.html">Alumni</a></li>
  <li class="menu-item"><a href="donations.html">Donations</a></li>
  <li class="menu-item"><a href="who_we_are.html">Who We Are</a></li>
  <li class="menu-item"><a href="photo_gallery.html">Photo Gallery</a></li>
  <li class="menu-item"><a href="contact_us.html">Contact Us</a></li>
</ul>