时间戳

首页 > 解决方案 > 如何防止导航滑入下一行？

html - 如何防止导航滑入下一行？

问题描述

现在我正在做一个 Codecademy 任务，我现在挣扎了好几个小时。我想把和放在同一行，但不知何故它总是滑到下一行。我几乎什么都试过了。

将感谢您的帮助。

HTML代码：

<!DOCTYPE html>
  <body>
      <div class="wrapper">
        <header id="home">
            <h1 class="center">Clubhouse Page</h1>
            <nav>
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#main">Main</a></li>
                </ul>
            </nav>
        </header>
        <main id="main">

        </main>
    </div>
  </body>
</html>

CSS 代码：

/* All */

.wrapper {
    display: grid;
    width: 100vw;
    height: 100vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 100px);
    grid-gap: 0.5rem;
    grid-auto-rows: 200px;
}

/* header */
header {
    background-color: #B37E05;
    position: sticky;
    grid-column: 1 / span 3;
    grid-row: 1;
    padding-left: 1.5rem;
}

header h1{
    font-size: 2.5rem;
}

/* nav */

nav{
    width: 1fr;
    background-color: #B37E05;
    position: sticky;
    grid-column: 3 / span 1;
    grid-row: 1;
    text-decoration: none;
    justify-content: space-between;
}

header nav a{
    text-transform: uppercase;
}
nav ul{
    list-style-type: none;
}
nav li{
    display:inline-block;
    background-color: #548AFF;
    border-radius: 10px 10px 0 10px;
    padding: 1rem;
}

（占位符，因为我需要添加更多细节，但我已经阐明了整个任务）

标签： htmlcssgrid

解决方案

推荐阅读