Question

我无法理解为什么我的列表项之间的边界不可点击。我过去曾经管理过它，但即使看过以前的努力也无法帮助我看到它。我已经尝试过盒子大小调整，使用像老式工作导航菜单一样的flex，增加高度 - 没有运气。我可以再次写它，或者从我最后的努力中复制代码，我确信它会起作用，但我不知道为什么它不像我预期的那样表现。

https://codepen.io/nwoodward/pen/GQVPdO?editors=1100

ul,
li {
  margin: 0;
  padding: 0;
}

header .site-nav {
  background-color: rgba(0, 0, 0, 0.8);
}

header .site-nav li {
  display: block;
  position: relative;
  border-bottom: 1px solid #808080;
}

header .site-nav a {
  display: block;
  padding: 1em;
  color: rgba(255, 255, 255, .8);
}

.site-nav a:hover,
.site-nav a:focus {
  color: #85d16c;
}

.site-nav li:hover,
.site-nav li:focus {
  background-color: rgba(133, 209, 108, 0.1);
}

.site-nav li:hover::before,
.site-nav li:focus::before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 10px;
  background-color: rgba(133, 209, 108, 0.1);
}

<header>
  <nav class="site-nav">
    <ul>
      <li><a href="#">Support</a></li>
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
    </ul>
  </nav>
</header>

Answer 1

将边框放在列表项目本身的a链接上：

header .site-nav a {
  display: block;
  padding: 1em;
  color: rgba(255, 255, 255, .8);
  border-bottom: 1px solid #808080;
}

https://codepen.io/ssergei/pen/dmbMje

Answer 2

这是因为您想要边框的元素位于链接标记之外。尝试这样的事情：

＆＃13;

ul,
li {
  margin: 0;
  padding: 0;
}

header .site-nav {
  background-color: rgba(0, 0, 0, 0.8);
}

header .site-nav li {
  display: block;
  position: relative;
}


header .site-nav a {
  display: block;
  padding: 1em;
  color: rgba(255, 255, 255, .8);
  border-bottom: 1px solid #808080;
}

.site-nav a:hover,
.site-nav a:focus {
  color: #85d16c;
}

.site-nav a:hover,
.site-nav a:focus {
  background-color: rgba(133, 209, 108, 0.1);
}

.site-nav li:hover::before,
.site-nav li:focus::before {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 10px;
  background-color: rgba(133, 209, 108, 0.1);
}

＆＃13;

<header>
  <nav class="site-nav">
    <ul>
      <a href="#"><li>Support</li></a>
      <a href="#"><li>Sign Up</li></a>
      <a href="#"><li>Log In</li></a>
    </ul>
  </nav>
</header>

＆＃13;

Answer 3

如果您希望边框像链接一样点击，则将边框放在链接而不是列表项上。 <li>上的边框是<li>的一部分，并且没有默认的点击行为。

header .site-nav{ 
    background-color: rgba(0,0,0,0.8);
}

header .site-nav li{
    display:block;
    position: relative;
    /* border-bottom: 1px solid #808080;  */ /* DELETE THIS */
}

header .site-nav a{
    display: block;
    padding: 1em;
    color:rgba(255,255,255,.8);
    border-bottom: 1px solid #808080;
}

Pen here.

列表项之间的不可更改的边框

3 个答案: