如何在悬停时制作触及导航底部的边框答案

【问题标题】：How to make a border that touches the bottom of the nav on hover如何在悬停时制作触及导航底部的边框
【发布时间】：2020-10-07 20:20:22
【问题描述】：

我正在尝试设置菜单样式，但遇到了一个小问题。我希望悬停时的红色边框触摸导航的边框底部。所以它看起来像这样：

我怎样才能得到这个效果？我试过了，但我下面的代码是这样做的：

nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #546478;
    padding: 5px 20px;
}

.nav__container {
    max-width: 93.75rem;
    margin: 0 auto;
}

li {
    list-style: none;
    margin: 20px;
}

li:hover {
    border-bottom: 1px solid red;
}

.hero__nav-items {
    margin-left: auto;
}

.hero_nav-list {
    display: flex;
}

<section class="hero">
  <div class="hero__container">
    <nav>
      <div class="hero__nav-logo">
        <img src="img/logo.png">    
      </div>
      <div class="hero__nav-items">
        <ul class="hero_nav-list">
          <li>Menu</li>
          <li>Menu</li>
          <li>Menu</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

【问题讨论】：

标签： html css

【解决方案1】：

从hero_nav-list 中移除内边距和边距并在li 中添加内边距

nav {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #546478;
    padding: 0 20px;
}

.nav__container {
    max-width: 93.75rem;
    margin: 0 auto;
}

li {
    list-style: none;
    margin: 0 20px;
    padding: 20px 0;
    border-bottom: 1px solid transparent;
    transition: all 0.4s;
}

li:hover {
    border-bottom-color: red;
}

.hero__nav-items {
    margin-left: auto;
}

.hero_nav-list {
    display: flex;
    padding: 0;
    margin: 0;
}

<section class="hero">
  <div class="hero__container">
    <nav>
      <div class="hero__nav-logo">
        <img src="img/logo.png">    
      </div>
      <div class="hero__nav-items">
        <ul class="hero_nav-list">
          <li>Menu</li>
          <li>Menu</li>
          <li>Menu</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

【讨论】：

为什么它会在我的屏幕上将边框向下推1px？
@Dave 只需调整 li 的填充以完美匹配
@MinalChauhan 实际上不，这不是 OP 所要求的。这就是为什么在 SO 上不鼓励仅使用代码的答案 :)

【解决方案2】：

只需使用padding 而不是margin

nav {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #546478;
  padding: 0px 20px;
}

.nav__container {
  max-width: 93.75rem;
  margin: 0 auto;
}

li {
  list-style: none;
  padding: 20px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

li:hover {
  border-bottom-color: red;
  transition: all .3s
}

.hero__nav-items {
  margin-left: auto;
}

.hero_nav-list {
  display: flex;
  margin: 0;
}

<section class="hero">
  <div class="hero__container">
    <nav>
      <div class="hero__nav-logo">
        <img src="img/logo.png">    
      </div>
      <div class="hero__nav-items">
        <ul class="hero_nav-list">
          <li>Menu</li>
          <li>Menu</li>
          <li>Menu</li>
        </ul>
      </div>
    </nav>
  </div>
</section>

【讨论】：

【解决方案3】：

问题是您使用margin 而不是padding 在文本下方创建空间。边框适用于外部，包括内边距，但不包括边距。

查看最后的工作示例，您需要的更改在这里：

将您的li 的边距更改为填充：li { padding: 20px; /* change margin to padding */ }
您还需要从ul 中删除边距，因为它会增加更多空间。
.hero_nav-list { margin: 0;}
删除nav:nav { padding: 0px 20px; }顶部和底部的填充
要使边框重叠，请设置li 下边距-1px: li { margin-bottom: -1px; }
添加一个将被红色边框替换的“不可见”边框 - 这将阻止导航边框在悬停时跳跃：li { border-bottom: 1px solid transparent; }

工作示例：

nav {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #546478;
  padding: 0px 20px;
}

.nav__container {
  max-width: 93.75rem;
  margin: 0 auto;
}

li {
  list-style: none;
  padding: 20px;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

li:hover {
  border-bottom: 1px solid red;
}

.hero__nav-items {
  margin-left: auto;
}

.hero_nav-list {
  margin: 0;
  display: flex;
}

<section class="hero">
  <div class="hero__container">
    <nav>
      <div class="hero__nav-logo">
        <img src="img/logo.png">
      </div>

      <div class="hero__nav-items">
        <ul class="hero_nav-list">
          <li>Menu</li>
          <li>Menu</li>
          <li>Menu</li>
        </ul>
      </div>
    </nav>

  </div>
</section>

【讨论】：