Question

I have a simple <ul> menu with some list items. I used the :last-child pseudo class to apply a right border to the last list item. Each previous list item has only a left border. It looked fine, until I modified my HTML code to surround the list items with <a> tags. I did this because I wanted the entire list item to be a clickable link. Unfortunately, that broke my design because now, each list item was the last-child since it was nested within an <a> tag. So now every list item has a left and right border. How can I have the the right border only on the last list item and still retain a full clickable list item?

Here's the HTML I was using to test:

<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>

And the 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;。参见下面的代码段

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>

Answer 2

正确的选择器现在是

a:last-child .tabs__tab-list-item

.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;
}

 a:last-child .tabs__tab-list-item {
     background-color: lightblue;
    border-right: 1px solid black;
}

.tabs__tab-list-item--current {
    background-color: white;
}

<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>

Answer 3

用标签包围列表项是无效的HTML。只需将列表项的内容放入div中，并用标签将这些div包围并设置样式即可。

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

Answer 4

现在，您需要定位列表中的最后一个<a>，而不是

.tabs__tab-list-item:last-child

使用

.tabs__tab-list a:last-child

列表上有<a> tags surrounding each </a> <li> <a>

4 个答案: