CSS last-child 在列表中，每个 <li> 周围都有 <a> 标签

Question

我有一个简单的<ul> 菜单，其中包含一些列表项。我使用 :last-child 伪类将右边框应用于最后一个列表项。每个先前的列表项只有一个左边框。它看起来很好，直到我修改了我的 HTML 代码以用<a> 标记包围列表项。我这样做是因为我希望整个列表项成为可点击的链接。不幸的是，这破坏了我的设计，因为现在每个列表项都是最后一个子项，因为它嵌套在 <a> 标记中。所以现在每个列表项都有一个左右边框。如何仅在最后一个列表项上设置右边框，并且仍然保留完整的可点击列表项？

这是我用来测试的 HTML：

<div class="tabs">
    <div class="tabs__tab-list">
        <ul>
            <a href=""><li class="tabs__tab-list-item tabs__tab-list-item--active">Look Ups</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Types</li></a><!--
            --><a href=""><li class="tabs__tab-list-item">Look Up Relationships</li></a><!--
       --></ul>
    </div>
</div>

还有 CSS：

.tabs {
width: 70%;
margin: 20px;
min-height: 20px;
min-width: 700px;
display: block;
}

.tabs__tab-list {
    display: block;
    padding-left: 30px;
}

.tabs__tab-list-item {
    display: inline-block;
    border-left: 1px solid black;
    border-top: 1px solid black;
    background-color: lightgray;
    padding: 5px 10px 5px 5px;
    color: black;
}

.tabs__tab-list-item:hover {
    background-color: #E8E8E8;
}

.tabs__tab-list-item:active {
    background-color: white;
}

 .tabs__tab-list-item:last-child {
    border-right: 1px solid black;
}

.tabs__tab-list-item--current {
    background-color: white;
}

Answer 1

我认为您只需将<a/> 标签移动到<li/> 标签内，并将.tabs__tab-list-item 设置为display: inline;。见下面的sn-p

html, body{
  width: 100%;
}
.tabs {
  width: 70%;
  margin: 20px;
  display: block;
}

.tabs__tab-list {
  display: block;
  padding-left: 30px;
}
.tabs__tab-list > ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
 }

.tabs__tab-list-item{
  flex: 1 1 auto;
  border-left: 1px solid black;
  border-top: 1px solid black;
  background-color: lightgray;
  color: black;
}
.tabs__tab-list-item a{
  padding: 5px 10px 5px 5px;
  display: block;
  white-space: nowrap;
}

.tabs__tab-list-item:hover {
  background-color: #E8E8E8;
}

.tabs__tab-list-item:active,
.tabs__tab-list-item--active{
  background-color: white;
}

.tabs__tab-list-item:last-child {
  border-right: 1px solid black;
}

.tabs__tab-list-item--current {
  background-color: white;
}

<div class="tabs">
  <div class="tabs__tab-list">
    <ul>
      <li class="tabs__tab-list-item tabs__tab-list-item--active">
        <a href="">Look Ups</a>
      </li>
      <li class="tabs__tab-list-item">
        <a href="">Look Up Types</a>
      </li>
      <li class="tabs__tab-list-item">
        <a href="">Look Up Relationships</a>
      </li>
    </ul>
  </div>
</div>