html - 边框图像出现在所有菜单项之间，但不出现在最后一个菜单项之间

Question

我正在使用边框图像来分隔导航栏中的菜单项。该图像出现在所有元素的顶部，但我也希望它出现在最后一个元素的底部。我尝试使用 last-child 并使用 center bottom 但随后它从最后一个元素的顶部消失并出现在底部。请检查这张图片 - i.ibb.co/hBS62fN/Screenshot-1.jpg。这是我的代码:

我只希望边框图像出现在我的 navbar 的所有四个元素的顶部和底部。

这是我迄今为止尝试过的。此代码从联系人顶部删除边框并将其放在底部。

    .main-nav {
      width: 100%;
      height: 200px;
    }

    .nav-content {
      width: 100%;
      height: 100%;
    }

    .main-nav ul {
      list-style: none;
      display: block;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    .main-nav ul li {
      width: 100%;
      height: 45px;
      background-image: url(../images/borderimage.png);
      background-repeat: no-repeat;
      background-position: center top;
      margin: 0;
      padding: 0;
    }

    .main-nav ul li a {
      font-weight: normal;
      font-size: 15px;
      color: #AA9776;
      text-decoration: none;
      /*    background-image: url(../images/menucizgi.png);
        background-repeat: no-repeat;
        background-position: center top;*/
      float: left;
      height: 23px;
      width: 157px;
      text-align: left;
      text-shadow: 2px 2px 10px #000;
      padding: 8px 0 10px 45px;
      margin: 2px 0;
    }

    .main-nav ul li a.active {
      color: #AA9776;
      /*background-image: url(../images/menuover.jpg);
        background-repeat: no-repeat;
        background-position: center top;*/
      background: rgba(0, 0, 0, 0.7);
      text-shadow: 0 1px 1px #000;
      -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
      -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: 1s ease;
    }

    .main-nav ul li a:hover {
      color: #AA9776;
      /*background-image: url(../images/menuover.jpg);
        background-repeat: no-repeat;
        background-position: center top;*/
      background: rgba(0, 0, 0, 0.7);
      text-shadow: 0 1px 1px #000;
      -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
      -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 #000;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: 1s ease;
    }
  .main-nav ul li:last-child {
      background-image: url(../images/borderimage.png);
      background-repeat: no-repeat;
      background-position: center bottom;
    }

    <div class="main-nav">
      <div class="nav-content">
        <ul>
          <li><a href="#about" class="active">About</a></li>
          <li><a href="#leather">Leather</a></li>
          <li><a href="#leather-goods">Leather Goods</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>

Answer 1

两个可能有效的选项:

尝试将最后一个 child 修改为:

.main-nav ul li:last-child {
      background: url(../images/borderimage.png) center bottom no-repeat, 
                  url(../images/borderimage.png) center top no-repeat,
}

或将其添加到您现有的 CSS 中:

.main-nav ul li:last-child:before {
      background-image: url(../images/borderimage.png);
      background-repeat: no-repeat;
      background-position: center top;
}

如果不在演示中对其进行测试，则不确定它是否会起作用。