Question

我想删除最后一个子边框右边的列表元素，如下所示，我尝试使用不同的类型将其删除但不适用于此，请帮助我解决此问题。

<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

＃ul-head 列表中没有<a>标记

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

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

对于列表＃menu-item 的项目，li标签上使用了边框，因此您的css代码应如下所示：

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

如何在使用多个未排序的列表时删除列表项的最后一个子项的border-right

1 个答案: