时间戳

首页 > 解决方案 > 如何更正我的代码并在此处包装 nav 元素，如提供的照片所示？

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

问题描述

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

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

}


---

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

标签： htmlcssnav

解决方案

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

重组您的导航 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;
}

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

推荐阅读