怎么使导航悬停2个字变成4个字的同时下边框出现在底部
![分享问题](/r/img/web-kenghu/share.png)
我也踩过这个坑( 1 )
详细描述
截图
![](http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/3/3a78deec-4906-4aed-afda-26f7c5626cc8.png)
代码
编辑于2025-02-04
-
[北京|]JS-
0出现这个问题是因为子级承载太多属性,把一些属性给父级即可,还有ul的高度和导航栏高度不一致
HTML
<ul class="navbar-nav ml-auto"><li class="nav-item active nav-link-width"><a class="nav-link font-size-18 nav-link-size" href="#">首页机缘</a></li><li class="nav-item nav-link-width"><a class="nav-link active font-size-18 nav-link-size" href="#">职业咨询</a></li><li class="nav-item nav-link-width "><a class="nav-link active font-size-18 nav-link-size" href="#">合作企业</a></li><li class="nav-item nav-link-width nav-link-reight"><a class="nav-link active font-size-18 nav-link-size " href="#">关于修真</a></li>css
.nav-link-size{height: 21px;line-height: 21px;overflow: hidden;padding: 0 !important;}.nav-link-width {width: 37px;height: 100px;padding: 0 !important;margin-left: 80px !important;display: flex;align-items: center;justify-content: center;}.nav-height {height: 100px;}.nav-link-width:hover{width: 72px;border-bottom: 4px solid #fff;padding-top: 7px !important;margin-right:-15px ;margin-left: 60px !important;}.nav-link-reight{}.nav-link-reight:hover{margin-left: 45px !important;margin-right:0px ;}编辑于2019-06-29
- 去第 页