html - 如何在使用多个无序列表时删除列表项的最后一个子项的右边框

Question

我想删除列表 a 元素的最后一个子 border-right，如下所示，我尝试使用不同的类型来删除它，但不起作用，请帮助我解决这个问题。

<header>
  <div id="tag" >
    <ul id="menu-item" class="nav">
       <li id="item-1" class="item-type"> <a href="index.html"> Home </a</li>
       <li id="item-2" class="item-type"> <a href="about.html"> About Me </a></li>
       <li id="item-3" class="item-type"> <a href="contact.html"> Contact </a> </li>
       <li id="item-4" class="item-type"> <a href="map.html"> Map </a> </li>
    </ul>
 </div>
 <div id="head">
   <ul id="ul-head">
      <li id="head-1" > <a href="/"> <img id="profile" src="Images/display.jpg" alt="profile" width="80px" height="80px" /> </a> </li>
      <li id="head-2" class="head-item"> TECHNOLOGIES </li>
      <li id="head-3" class="head-item"> RESUME </li>
      <li id="head-4" class="head-item"> FUTURE SCOPE </li>
      <li id="head-5" class="head-item"> INTEREST </li>
    </ul>
  </div>
</header>

应用 CSS 如下:

#menu-item {
   position: absolute;
   display: block;
   list-style-type: none;
   float: right;
   left: 850px;
   padding: 9px 10px 9px 10px;
   text-align: center;
   margin: 0px
 }
#menu-item > li {
     float: left;
     display: inline;
     border-left: 1px solid #fff ;
      padding: 1px 15px 1px 15px;
    }
.item-type a {
      color: #FFFFFF;
      text-decoration: none;
   }

#head #ul-head #head-1 a #profile {
        position: absolute;
        border-radius: 50%;
        display: inline;
        left: 140px;
        top: 0px
    }

.head-item {
         position: relative;
         font-size: 16px;
         font-family: Arial;
         font-weight: bold;
         left: 230px;
         top: 15px;
         color: #778899;
      }
#ul-head > li {
          float: left;
          display: inline;
          border-right: 1px solid #000000;
          padding: 1px 25px 1px 25px;
          text-align: center;
     }
#tag #menu-item li:first-child a {
        border-left: none;
     }
#head #ul-head li:last-child a {
         border-right: none;
     }

Answer 1

你没有 <a> #ul-head 列表中的标签

因此您需要将代码更改为:

#head #ul-head li:last-child{
         border-right: none;
     }

对于 #menu-item 列表中的元素，边框用在 li 标签上，因此您的 css 代码应如下所示:

#tag #menu-item li:first-child{
        border-left: none;
     }