CSS 网格导航栏！如何在中间对齐 2 个 div，并在网站伸展的最左边和右边有 1 列？

Question

我是网络开发的新手，但我玩得很开心。我只是在努力弄清楚我应该如何有效地做到这一点。我正在尝试使用 CSS 网格制作响应式导航栏，但我还没有真正了解响应式位。我现在有 2 个 Div，navbar（我的导航链接）和 settings（还不完全确定我在做什么，将包括主题选择等选项），我需要将这 2 个 div 居中，并在最左边和最右边有一列跨越当 window 被拉伸得足够远时。

如果可能的话，我还想在我的导航链接样式方面得到一些帮助，尽管我添加了 text-decoration：none;。这也是我第一次在 Whosebug 上，所以如果我在这里做错了什么，请告诉我。

HTML

<head>
    <title>EminaReads</title>
    <link id="theme" rel="stylesheet" />
</head>

<body onload="CheckTheme()">
    <div hidden id="loading-wrapper">
        <header>

            <nav>
                <ul>
                    <li>
                        <a class="active" href="#">Homepage</a>
                    </li>
                    <li>
                        <a href="#">Follow</a>
                    </li>
                    <li>
                        <a href="#">Info</a>
                    </li>
                </ul>
            </nav>

            <div class="settings">
                <select id="theme-select">
                    <option hidden>Select Theme</option>
                    <option onclick="SwapTheme('./styles/Dark.css')" value="Dark">
                        Dark
                    </option>
                    <option onclick="SwapTheme('./styles/Light.css')" value="Light">
                        Light
                    </option>
                </select>
            </div>

        </header>
        <main>
            <div class="blog">
                <h2>Blog update1</h2>
                <h2>Blog update2</h2>
            </div>
            <aside>
                <p>Discord Link</p>
                <p>Music Player</p>
            </aside>
        </main>
        <footer>
            <p>Testing Footer</p>
        </footer>
    </div>
    <p id="js-alert">JAVASCRIPT</p>
</body>
</html>

CSS

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: rgb(119, 119, 119);
}

/* Navigation System */
header {
    position: sticky;
    top: 0px;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr;

    background-color: rgb(59, 59, 59);
    box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.25);
}

nav {
    margin: 0;
    padding: 0;
    grid-area: 1 / 2 / 2 / 4;
}

nav li {
    display: inline;
}

nav li a.active {
    background-color: #4caf50;
}
nav li a:hover:not(.active) {
    background-color: #111;
}

/* Settings */
.settings {
    grid-area: 1 / 4 / 2 / 6;
}

/* Content */
main {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
}
.blog {
    grid-area: 2 / 2 / 8 / 7;
}
aside {
    grid-area: 2 / 7 / 8 / 9;
}
footer {
    margin-top: 1000px;
    background-color: grey;
}

Javascript

function CheckTheme() {
    if (localStorage.savedtheme !== null) {
        document
            .getElementById("theme")
            .setAttribute("href", localStorage.savedtheme);
        console.log("if");
    } else {
        document.getElementById("theme").setAttribute("href", "./styles/Dark.css");
        console.log("else");
    }
    console.log("other");
    document.getElementById("loading-wrapper").removeAttribute("hidden");
    document.getElementById("js-alert").style.display = "none";
}

function SwapTheme(style) {
    document.getElementById("theme").setAttribute("href", style);
    localStorage.setItem("savedtheme", style);
}

见笔八神樱 (@SakuraYagami) 的 EminaReads 在 CodePen 上。

Answer 1

I need these 2 divs to be centred and have a column on the far left & right that spans out when the window has been stretched far enough.

为此，您必须再添加 2 个元素，然后使用网格区域为它们指定一些尺寸。请记住，grid 只能与声明了 display: grid 的元素的直接子元素一起使用。

就删除下划线而言，CSS 是正确的，只需确保您足够具体，以便选择正确的元素，使用类似：

    nav ul li a {
      text-decoration: none;
    }

希望对您有所帮助！

Answer 2

文本修饰的 CSS 应为：

nav li a {
  text-decoration: unset;
}

有很多不同的方法可以实现您在导航栏间距方面的需求，因此您最终使用的方法将取决于您希望子元素的行为方式。如果我没有正确理解您的要求，一种简单的方法可能是：

header {
  grid-template-columns: 1fr minmax(100px, 200px) minmax(100px, 200px) 1fr;
}

nav {
  grid-area: 1 / 2 / 2 / 3;
}

.settings {
  grid-area: 1 / 3 / 2 / 4;
}

我删除了多余的列以简化操作。 minmax 的意思很简单，这些单元格中的元素将缩小到最小尺寸，并增长到最大尺寸。所以在这个例子中，当页面宽度小于 400px 时，它们将占据整个屏幕，之后侧边栏将进入并平均填满屏幕的其余部分。

CSS 网格导航栏！如何在中间对齐 2 个 div，并在网站伸展的最左边和右边有 1 列？

CSS Grid Navbar! How to align 2 divs near the middle and have 1 column the far left&right that span out on website stretch?

html

javascript

css

navigationbar

HTML

CSS

Javascript