如何更正我的代码并将导航元素包装在此处，如提供的照片所示？

Question

我正在为学校做作业，别担心，我知道这在设计上看起来有多丑。我不会选择自己让它看起来像这样。但是，我在这里漏掉了一些要点，因为“在窄屏幕视图中，时间表页面上的 NAV 不会出现堆叠”。这是一张 link 导航栏应该是什么样子的照片：

https://i.stack.imgur.com/tDe5b.png

这是目前的样子：

https://i.stack.imgur.com/ZWdBV.png

---

这是一张缩小页面以模拟智能手机视图时的页面外观与当前页面外观的照片：

应该看起来像：https://i.stack.imgur.com/eSe62.jpg

目前看起来像：https://i.stack.imgur.com/XE1fx.jpg

---

这是我针对此特定页面的 HTML 代码：

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" 
        content="width=device-width, 
        initial-scale=1.0">
    <link href="yogacss.css" rel="stylesheet" />
<title>
    Yoga Schedule
</title>
<meta charset="utf-8">
</head>
        <div id="header">
    <header class="content">
        <h1>
            <a href="schedule.html">Path of Light Yoga Studio</a>
        </h1>
    </header>
    </div>
    <nav>
        <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="classes.html">Classes</a></li>
        <li><a href="schedule.html">Schedule</a></li> 
        <li><a href="contact.html">Contact</a></li> 
    </ul>
    </nav>
    <div id="wrapper">
    <main>
        <h2>
            Yoga Schedule
        </h2>
        <p>
            Mats, blocks, and blankets provided. Please arrive 
            10 minutes before your class begins. 
            Relax in our Serenity Lounge before or after your class.
        </p>
        <section class="flow">
        <h3>
            Monday — Friday
        </h3>
        <ul>
            <li>9:00am Gentle Hatha Yoga</li>
            <li>10:30am Vinyasa Yoga</li>
            <li>5:30pm Restorative Yoga</li>
            <li>7:00pm Gentle Hatha Yoga</li>
        </ul>
        <h3>
            Saturday & Sunday
        </h3>
        <ul>
            <li>10:30am Gentle Hatha Yoga</li>
            <li>Noon Vinyasa Yoga</li>
            <li>1:30pm Gentle Hatha Yoga</li>
            <li>3:00pm Vinyasa Yoga</li>
            <li>5:30pm Restorative Yoga</li>
        </ul>
    </section>
            <div id="loungehero">
                
                </div>
        </main>
<footer>
    Copyright &copy; 2020 Path of Light Yoga Studio<br>
    <a href="mailto:eli@gmail.com">Send Email</a>
</footer>
</div>
</html>

---

这是我的 CSS 代码：

body {
    margin: 0;
    background-color: #3F2860;
    color: #40407A;
    font-family: Verdana, Arial, sans-serif;
}
header {
    background-color: #40407A;
    background-image: url(sunrise.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
    font-size: 90%;
    margin-top: 30px;
    min-height: 200px;
}
header a:link {
    color:#FFF;
    text-decoration: none;
}
header a:visited {
    color:#FFF;
    text-decoration: none;
}
header a:hover {
    color: #EDF5F5;
}
h1 {
    
}
nav {
    padding: 1em;
    padding-top: 0.5em;
    position: fixed;
    top: 0;
    left: 0;
    text-align: right;
    background-color: white;
    margin: 0;
    padding-right: 0;
    z-index: 9999;
    width: 100%;
}
nav a {
    text-decoration: none;
    display: block;
}
nav a:link { color: #3F2860;
    width: 40%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1em;
    padding-right: 1em;
    display: inline; 
}
 nav a:visited { color: #497777; 
}
 nav a:hover { color: #A26100; 
}
nav ul {
    list-style-type: none;
    padding: 0%;
    display: flex;
    margin: 0;
    font-size: 1.2em;
    flex-wrap: wrap;
}
.studio {
    font-style: italic;
}
footer {
    font-size: .60em;
    font-style: italic;
    text-align: center;
}
#wrapper {
    background-color: #F5F5F5;
    padding: 2em;
}
main {
    
}
#hero {
    
}
* {
    box-sizing: border-box; 
}
.floatleft {

}
.clear {
    
}
.onehalf {
    
}
.onethird {
    
}

.home {
    height: 20vh;
    padding-top: 2em;
    padding-left: 10%;
}

.content {
    height: 20vh;
    padding-top: 2em;
    padding-left: 10%;
}

#mathero {
    background-image: url(yogamat.jpg);
    background-repeat: no-repeat;
    height: 300px;
    background-size: cover;
    display: none;
}

#loungehero {
    background-image: url(yogalounge.jpg);
    background-repeat: no-repeat;
    height: 300px;
    background-size: cover;
    display: none;
}

section {
}

#mobile {
    display: inline;
}

#desktop {
    display: none;

}


@media screen and (min-width: 600px) {
    .nav ul {
        grid-row: nowrap;
        justify-content: flex-end;
    }
    .nav a:link {
        width: 70em;
    }
    .section {
        padding-left: 2em;
        padding-right: 2em;
    }
    #mathero, #loungehero {
        display: block;
        padding-bottom: 1em;
    }
    #flow {
        flex-direction: row;
    }
    #mobile {
        display: inline;
    }
    #desktop {
        display: none;
    }
}
@media screen and (min-width: 1024px) {
    .header {
        font-size: 120%;
    }
    .home {
        height: 50vh;
        padding-top: 5em;
        padding-left: 8em;
    }
    .content {
        height: 30vh;
        padding-top: 1em;
        padding-left: 8em;
    }
    #wrapper {
        margin: auto;
        width: 80%;
    }

}

---

非常感谢，如果您能提供帮助，我将不胜感激。这让我很沮丧。

Answer 1

首先，您需要使用正确的基础结构来设置菜单，因此我将您的 ul 分为两部分。如您所见，我对您的 css 进行了一些更改。您可以自行更改菜单的颜色和内容。

CSS:

body {
            margin: 0;
            background-color: #3F2860;
            color: #40407A;
            font-family: Verdana, Arial, sans-serif;
        }
        header {
            background-color: #40407A;
            background-image: url(sunrise.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            color: white;
            font-size: 90%;
            margin-top: 30px;
            min-height: 200px;
        }
        header a:link {
            color:#FFF;
            text-decoration: none;
        }
        header a:visited {
            color:#FFF;
            text-decoration: none;
        }
        header a:hover {
            color: #EDF5F5;
        }
        h1 {
            
        }
        nav {
            padding: 1em;
            padding-top: 0.5em;
            position: fixed;
            top: 0;
            left: 0;
            text-align: right;
            background-color: white;
            margin: 0;
            padding-right: 0;
            z-index: 9999;
            width: 100%;
        }
        nav a {
            text-decoration: none;
            display: block;
        }
        nav a:link { color: #3F2860;
            width: 40%;
            padding-top: 0;
            padding-bottom: 0;
            padding-left: 1em;
            padding-right: 1em;
            display: inline; 
        }
         nav a:visited { color: #497777; 
        }
         nav a:hover { color: #A26100; 
        }

        nav ul {
            list-style-type: none;
            padding: 0%;
            margin: 0;
            font-size: 1.2em;
            width: 50%;
            display: flex;
            flex-wrap: wrap;
        }

        /* New Styling */
        @media screen and (max-width: 700px) {

        .rightmenu {
            text-align: left;
        }

        .rightmenu li a {
            color: green;
        }

        .leftmenu li a {
            color: blue;
        }

        nav {
            display: flex;
        }

        nav ul {
            display: block;
        }

    }

        .studio {
            font-style: italic;
        }
        footer {
            font-size: .60em;
            font-style: italic;
            text-align: center;
        }
        #wrapper {
            background-color: #F5F5F5;
            padding: 2em;
        }
        main {
            
        }
        #hero {
            
        }
        * {
            box-sizing: border-box; 
        }
        .floatleft {
        
        }
        .clear {
            
        }
        .onehalf {
            
        }
        .onethird {
            
        }
        
        .home {
            height: 20vh;
            padding-top: 2em;
            padding-left: 10%;
        }
        
        .content {
            height: 20vh;
            padding-top: 2em;
            padding-left: 10%;
        }
        
        #mathero {
            background-image: url(yogamat.jpg);
            background-repeat: no-repeat;
            height: 300px;
            background-size: cover;
            display: none;
        }
        
        #loungehero {
            background-image: url(yogalounge.jpg);
            background-repeat: no-repeat;
            height: 300px;
            background-size: cover;
            display: none;
        }
        
        section {
        }
        
        #mobile {
            display: inline;
        }
        
        #desktop {
            display: none;
        
        }
        
        
        @media screen and (min-width: 600px) {
            .nav ul {
                grid-row: nowrap;
                justify-content: flex-end;
            }
            .nav a:link {
                width: 70em;
            }
            .section {
                padding-left: 2em;
                padding-right: 2em;
            }
            #mathero, #loungehero {
                display: block;
                padding-bottom: 1em;
            }
            #flow {
                flex-direction: row;
            }
            #mobile {
                display: inline;
            }
            #desktop {
                display: none;
            }
        }
        @media screen and (min-width: 1024px) {
            .header {
                font-size: 120%;
            }
            .home {
                height: 50vh;
                padding-top: 5em;
                padding-left: 8em;
            }
            .content {
                height: 30vh;
                padding-top: 1em;
                padding-left: 8em;
            }
            #wrapper {
                margin: auto;
                width: 80%;
            }
        
        }

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" 
        content="width=device-width, 
        initial-scale=1.0">
    <link href="yogacss.css" rel="stylesheet" />
<title>
    Yoga Schedule
</title>
<meta charset="utf-8">
</head>
        <div id="header">
    <header class="content">
        <h1>
            <a href="schedule.html">Path of Light Yoga Studio</a>
        </h1>
    </header>
    </div>
    <nav>
    <ul class="leftmenu">
        <li><a href="index.html">Home</a></li>
        <li><a href="classes.html">Classes</a></li>
    </ul>
    <ul class="rightmenu">
        <li><a href="schedule.html">Schedule</a></li> 
        <li><a href="contact.html">Contact</a></li> 
    </ul>
    </nav>
    <div id="wrapper">
    <main>
        <h2>
            Yoga Schedule
        </h2>
        <p>
            Mats, blocks, and blankets provided. Please arrive 
            10 minutes before your class begins. 
            Relax in our Serenity Lounge before or after your class.
        </p>
        <section class="flow">
        <h3>
            Monday — Friday
        </h3>
        <ul>
            <li>9:00am Gentle Hatha Yoga</li>
            <li>10:30am Vinyasa Yoga</li>
            <li>5:30pm Restorative Yoga</li>
            <li>7:00pm Gentle Hatha Yoga</li>
        </ul>
        <h3>
            Saturday & Sunday
        </h3>
        <ul>
            <li>10:30am Gentle Hatha Yoga</li>
            <li>Noon Vinyasa Yoga</li>
            <li>1:30pm Gentle Hatha Yoga</li>
            <li>3:00pm Vinyasa Yoga</li>
            <li>5:30pm Restorative Yoga</li>
        </ul>
    </section>
            <div id="loungehero">
                
                </div>
        </main>
<footer>
    Copyright &copy; 2020 Path of Light Yoga Studio<br>
    <a href="mailto:eli@gmail.com">Send Email</a>
</footer>
</div>
</html>

Answer 2

有不同的方法可以做到这一点，但根据您的代码结构和要求，最简单的解决方案是：

重组您的导航 HTML 代码如下：

<nav>
        <ul>
            <li><a href="index.html">Home</a> <br /> <a href="classes.html">Classes</a></li>
            <li><a href="schedule.html">Schedule</a> <br /><a href="contact.html">Contact</a></li> 
        </ul>
    </nav>

并更新您的以下 CSS 代码以获得所需的结果：

nav ul {
    list-style-type: none;
    padding: 0%;
    display: flex;
    font-size: 1.2em;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    justify-content: space-evenly;
}
nav ul li {
    display: block;
    text-align: left;
}
nav ul li:first-child {
    text-align: right;
}
nav a:link {
    color: #3F2860;
    width: auto;
    padding: 0;
    display: inline-block;
    margin-bottom: 5px;
}
nav ul li:first-child a{
    color:#477677;
}

注意：它将在所有设备上完美运行。

如何更正我的代码并将导航元素包装在此处，如提供的照片所示？

How can I correct my code and wrap the nav element here as shown in the photo provided?

html

css

nav