导航栏中的导航偏移

马利克·卜拉希米(Malik Brahimi)

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

在此处输入图片说明

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

边框上有一个1px的边框 navbar

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

删除那个。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章