html - 悬停时转换 div 时导航弹跳

Question

我正在为我的站点构建导航。我为此使用了 flexbox。我想在悬停时在 .nav-item 的底部显示一个栏。跨度应在 nav 中垂直居中，.bar 应始终位于 nav 的底部 并且.nav-item. 为了得到这个布局，我在文本上方有另一个 .bar，它有 background-color: transparent;。比起我使用 flexbox 和 justify-content: space-between; 来获得我的布局(悬停时，span center vertical and .bar on bottom)。目前这工作正常。我想更改一些要点，但我不知道如何更改:

• 当悬停在 .nav-item 上时，.bar 应该改变它的高度，而不会弹跳 nav(查看代码片段) . nav 应该保留，只有 .bar 应该上下移动。
• 我想在我的导航栏上放置一些填充，但是当我这样做时，布局是错误的(栏不在导航栏的底部，原因很清楚)。如何解决这个问题(在导航上填充并仍然获得正确的布局)？
• 是否有另一种(也许更好的方法)将条形图放在底部，使跨度垂直居中而不隐藏条形图？

html,
body {
  margin: 0;
}

nav {
  display: flex;
  align-items: center;
  /*padding: 20px;*/
  border-bottom: 1px solid lightgrey;
}

.nav-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 20px;
  height: 100%;
  transition: all 1s ease-in-out;
  cursor: pointer;
  /*padding: 20px;*/
}

.bar {
  width: 100%;
  height: 0px;
  background-color: blue;
  transition: height 200ms ease-in-out;
}

.hidden {
  background-color: transparent;
}

.nav-item:hover>.bar {
  height: 3px;
}

<nav>
  <div class="nav-item">
    <div class="bar hidden"></div>
    <span>Item 1</span>
    <div class="bar"></div>
  </div>

  <div class="nav-item">
    <div class="bar hidden"></div>
    <span>Item 2</span>
    <div class="bar"></div>
  </div>

  <div class="nav-item">
    <div class="bar hidden"></div>
    <span>Item 3</span>
    <div class="bar"></div>
  </div>
</nav>

Answer 1

这是因为扩展了新的高度。要按照自己的方式进行，您需要使用 position 并将栏移出布局:

nav {
  display: flex;
  align-items: center;
  /*padding: 20px;*/
  border-bottom: 1px solid lightgrey;
  min-height: 27px;                           /* This one */
}

片段

html,
body {
  margin: 0;
}

nav {
  display: flex;
  align-items: center;
  /*padding: 20px;*/
  border-bottom: 1px solid lightgrey;
}

.nav-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-right: 20px;
  height: 100%;
  transition: all 1s ease-in-out;
  cursor: pointer;
  /*padding: 20px;*/
  position: relative;
}

.bar {
  left: 0;
  right: 0;
  bottom: 0;
  height: 0px;
  background-color: blue;
  transition: height 200ms ease-in-out;
  position: absolute;
}

.hidden {
  background-color: transparent;
}

.nav-item:hover>.bar {
  height: 3px;
}

<nav>
  <div class="nav-item">
    <div class="bar hidden"></div>
    <span>Item 1</span>
    <div class="bar"></div>
  </div>

  <div class="nav-item">
    <div class="bar hidden"></div>
    <span>Item 2</span>
    <div class="bar"></div>
  </div>

  <div class="nav-item">
    <div class="bar hidden"></div>
    <span>Item 3</span>
    <div class="bar"></div>
  </div>
</nav>