Question

这是问题所在：导航栏看起来像是在页面上浮动。

the probleme image

为什么导航栏看起来像这样？我对CSS还是陌生的，我已经尝试了所有方法，但没有任何效果。我再次重新编写了代码，但问题仍未解决。这是导航的外观。

<code>how it should look</code>

本教程来自udemy课程 https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/#%2F

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    background-color: #fff;
    color: #555;
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;%);
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}


/*-------------------------------------------------*/
/*reusable componment*/
/*-------------------------------------------------*/%);
.row {
    max-width: 1140px;
    margin: 0 auto;
}


/*-----------*/
/*headings*/
/*-----------*/
h1 {
    margin: 0;
    margin-bottom: 20px;
    margin-top: 0;
    color: #fff;
    font-size: 240%;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 1px;
    word-spacing: 4px;
}

/*-----------*/
/*buttons*/
/*-----------*/
.btn:link,
.btn:visited {
    display: inline-block;
    padding: 10px 30px;
    font-weight: 300;
    text-decoration: none;
    border-radius: 200px;
    transition: background-color 0.2s,border 0.2s ,color 0.2s;
}
.btn-1:link,
.btn-1:visited {
    background-color: #e67e22;
    color: #fff;
    margin-right: 15px;
}

.btn-2:link,
.btn-2:visited {
    border: 1px solid #e67e22;
    color: #e67e22

}
.btn-1:hover,
.btn-1:active {
    background-color: #b05d14;

}
.btn-2:hover,
.btn-2:active {
    background-color: #b05d14;
    color:  #fff;
}
/*-------------------------------------------------*/
/*HEADER*/
/*-------------------------------------------------*/
.hero-text-box{
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
header {
    background-image: -webkit%);-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(assets/images/hero.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
    background-attachment: fixed;
}


.logo{
    height: 100px;
    width: auto;
    float: left;
    margin-top: 20px;
}
.main-nav {

    float: right;
    list-style: none;
    margin-top: 55px;

}

.main-nav li {

    display: inline-block;
    margin-left: 40px;
}

.main-nav li a:link, 
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px  solid transparent;
-webkit-transition: border-bottom 0.3s, color 0.3s;
transition: border-bottom 0.3s, color 0.3s;
}

.main-nav li a:hover, 
.main-nav li a:active {
border-bottom: 2px solid #BF55EC;

<!DOCTYPE html>
<html>
<head>
    <title>omni food</title>
    <link rel="stylesheet" type="text/css" href="normalize.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="grid.css">
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">


</head>
<body>
    <header>
        <nav>
            <div class="row">
                <img src="assets/images/logo-white.png" alt="omni-food" class="logo">

            </div>

            <div class="main-nav">
                <ul>
                    <li> <a href="#">Food delivery</a> </li>
                    <li> <a href="#">How it works</a> </li>
                    <li> <a href="#">Our cities</a> </li>
                    <li> <a href="#">Sign up</a> </li>

                </ul>

            </div>

        </nav>
        <div class="hero-text-box">
            <h1>Goodbye junk food.<br>hello super healthy meals</h1>
            <a class="btn btn-1" href="#">I'm hungry</a>
            <a class="btn btn-2" href="#">show me more</a>
        </div>
    </header>
</body>
</html>

请帮助我

Answer 1

已定义，因此它占据了屏幕上的整个行。这将强制进入新行，使其显得更低。如果仍然需要行类的功能，则应同时包含img和UL。您可以完全摆脱该div并将类行应用于Nav元素。

    <nav class="row">
        <img src="assets/images/logo-white.png" alt="omni-food" class="logo">
        <div class="main-nav">
            <ul>
                <li> <a href="#">Food delivery</a> </li>
                <li> <a href="#">How it works</a> </li>
                <li> <a href="#">Our cities</a> </li>
                <li> <a href="#">Sign up</a> </li>

            </ul>

        </div>

    </nav>

Answer 2

不要仅将徽标用于整行。你用过 .row{ max.width: 1180px; }

将此.row类放入nav元素或从div中删除徽标的行类。

<nav class("row")>

为什么导航栏是这样的？

2 个答案: