Question

我要在导航链接上方页面顶部的这一行（在屏幕截图中

enter image description here

它在首页链接上方。，“ .navbar-links-”的高度-100％。这是此元素的代码：

//Main code

body,
html {
    margin: 0;
    padding: 0;
    font-family: Arial;
    font-size: 1em;
    opacity: 1;
    overflow-x: hidden;
    min-width: 320px
}

a:active,
a:hover,
a:visited {
    background-color: inherit
}

.main-header .main-navbar {
    padding: 5vh 10vw;
    background-color: #222629
}


.main-header .main-navbar .navbar-links {
    list-style: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: RobotoRegular;
    font-size: 14pt;
    font-weight: 400;
    margin: 0
}

.main-header .main-navbar .navbar-links li {
    display: inline-block;
    margin-right: 30px;
    border-top: #00bff3 solid 5px;
    margin-top: -5px
}

.main-header .main-navbar .navbar-links li a {
    text-decoration: none;
    color: #9699a6;
    position: relative
}


.home-header .navbar-home-link>a {
    color: #00bff3!important
}

.home-header .navbar-home-link>a:before {
    content: '';
    pozition: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: #00bff3 solid 5px;
    margin-top: -5px
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <base href="/"> -->

    <title>Space hosting</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


</head>

<body>
    <header class="main-header home-header container-fluid">
        <nav class="main-navbar row align-items-center">
            <ul class="navbar-links col align-self-center">
                <li class="navbar-home-link"><a href="javascript:void(0)">Home</a></li>
                <li class="navbar-pages-link"><a href="javascript:void(0)">Pages</a></li>
                <li class="navbar-hosting-link"><a href="javascript:void(0)">Hosting</a></li>
                <li class="navbar-domains-link"><a href="javascript:void(0)">Domains</a></li>
            </ul>
        </nav>
    </header>


</body>

</html>

我删除了此导航栏中的一些元素，包括“ 导航栏链接”中的2个元素（即博客和联系人）

谢谢。

Answer 1

.main-header .main-navbar {
    padding: 0 10vw;
    background-color: #222629
}


.main-header .main-navbar .navbar-links li {
    display: inline-block;
    margin-right: 30px;
    border-top: #00bff3 solid 5px;
    margin-top: -5px;
    padding-top: 5vh;
    padding-bottom: 5vh;
    position: relative;
}

.main-header .main-navbar .navbar-links li a {
    text-decoration: none;
    color: #9699a6;
    position: relative
}


.home-header .navbar-home-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: #00bff3 solid 5px;
    margin-top: -5px
}

代替.home-header .navbar-home-link> a：before在元素之前添加到.main-header .main-navbar .navbar-links li

导航

1 个答案: