Css 将border bottom应用于bootstrap 4中的活动项后，导航项未对齐在同一行中

在将边框应用于活动项后，我需要有关对齐同一行中导航项的帮助

我的

---

提前感谢。

您可以做的一件事是添加

边框底部：5px实心透明到
li
。这是因为盒子模型。由于活动元素定义了边框，因此其框将比非活动元素大

.navbar {
  height: 100px;
}

ul {
  height: 100%;
}

li {
  background-color: lightpink;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 10px;
  border-bottom: 5px solid transparent;
}

.active {
  border-bottom: 5px solid red;
}

这可能是您想要的


.navbar{
高度：100px；
}
.导航栏导航{
显示器：flex；
弯曲方向：行；
背景颜色：浅粉色；
填充：0 10px；
}
.nav项目：非（：最后一个子项）{
右边距：10px；
}
.主动{
边框底部：5px纯黄色；
}

或


.navbar{
高度：100px；
}
保险商实验室{
身高：100%；
背景颜色：浅粉色；
左侧填充：10px；
}
李{
显示器：flex；
对齐项目：居中；
右边距：10px；
位置：相对位置；
}
活动：：之后{
内容：''；
位置：绝对位置；
背景：红色；
高度：5px；
宽度：100%；
底部：0；
左：0；
}
检查一些可能性：


将
padding top:5px
添加到活动项中
将所有
元素放置在活动类中，使其具有相同的
边框底部
，但更改了
边框颜色
或透明度
使用伪元素模拟
边框底部
。请在此处查看以下代码或选中此选项


ul{
显示器：flex；
列表样式：无；
背景颜色：浅灰色；
}
ulli{
填充：20px；
位置：相对位置；
}
ul li.active：：之前{
位置：绝对位置；
内容：''；
宽度：100%；
高度：5px；
背景色：红色；
左：0；
底部：0；
}

项目
项目
项目
您需要在问题中添加一个。在第三方网站上发布可能会消失、被阻止或消失，这会使你的问题对未来的访问者失去所有价值。