Question

我正在为我的网站构建导航。我使用flexbox这个。我想在.nav-item的底部显示一个酒吧，当它徘徊时。跨度应该在nav中垂直居中，.bar 应始终位于nav和.nav-item.的底部以获得此布局在文本上方有另一个.bar，其中包含background-color: transparent;。比我使用flexbox和justify-content: space-between;来获取我的布局（悬停时跨度中心垂直和.bar）。目前这工作正常。我想改变一些观点，但我不知道如何：

当鼠标悬停在.nav-item上时，.bar应该改变它的高度，而不会弹跳nav（查看代码段）。 nav应该保留，只有.bar应该上下。
我想在我的导航栏上放一些padding，但是当我这样做时，布局是错误的（栏不在导航栏的底部，它很清楚为什么）。如何解决这个问题（在导航上填充并仍然得到正确的布局）？
是否还有另一种（可能更好的方法）将条形图放在底部，在不使用隐藏条的情况下使跨度垂直居中？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是因为新的height不断扩大。要以你的方式制作，你需要使用position并从布局中取出栏：

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

<强>段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

试试这个CSS

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;
  position: relative;
  padding:10px;
  /*padding: 20px;*/
}

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

.hidden {
  background-color: transparent;
}

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

}

希望这会有所帮助..

在悬停时转换div时导航弹跳

2 个答案: