Question

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

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

Answer 1

navbar

上有一个1px边框

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

删除它。

Answer 2

发生这种情况的原因是因为bootstrap的css在.navbar上对DOM对象进行了1px css边界。

要消除差距，只需进行更具体的选择并删除边框，例如

nav.navbar {
    border-bottom: 0px;
}

或类似的东西。

导航栏中的导航偏移

2 个答案: