gpt4 book ai didi

html - 导航栏中的导航偏移

转载 作者:太空宇宙 更新时间:2023-11-04 11:31:36 24 4
gpt4 key购买 nike

所以我试图在悬停导航栏中的列表项时创建下划线,但我在下划线和栏之间遇到了这种奇怪的偏移。有谁知道如何解决这个奇怪的问题?

enter image description here

<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "http://bit.ly/1WkdSlN">
<link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
<script type = "text/javascript" src = "js/bootstrap.js"></script>
<link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css">
</head>

<body style = "background-color: red">


<nav class = "navbar navbar-default">
<div class = "container">

<ul class = "nav navbar-nav navbar-left">
<li class = "text-uppercase"><a href="">Home</a></li>
<li class = "text-uppercase"><a href="">About</a></li>
<li class = "text-uppercase"><a href="">Intinerary</a></li>
</ul>

<ul class = "nav navbar-nav navbar-right">
<li class = "text-uppercase"><a href="">Service</a></li>
<li class = "text-uppercase"><a href="">Journey</a></li>
<li class = "text-uppercase"><a href="">Gallery</a></li>
</ul>

</div>
</nav>


</body>
</html>


.navbar-nav > li {
font-family: montserrat;
letter-spacing: 0.15em;
font-weight: 700;
font-size: 0.75em;
border-bottom: 3px solid transparent;
margin: 0px auto;
}

@media(min-width: 768px) {
.navbar-nav > li:hover {
border-bottom: 3px solid #222;
}
}

最佳答案

navbar 上有一个 1px 的边框

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent; /* here */
}

删除它。

关于html - 导航栏中的导航偏移,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31992757/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com