ul 子节点上的网格元素

Question

css、html 的新手，无法确定 nav.grid 元素未应用的原因？在下面的代码笔中，我的问题是为什么 ul {list-style-type: none;} 属性不适用？在下面发布了 html、css 和 codepen。我正在尝试使用网格创建导航栏，但无法应用网格。我使用这个 https://coder-coder.com/responsive-navigation-bar-flexbox-vs-css-grid/ 教程作为指南，但略微修改了它。

<html lang="en">
    <head>
        <title>Search</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
            <nav class="nav.grid">
                <ul>
                    <li class="fullwidth"><a href="https://www.google.com/imghp?hl=EN"> Images </a></li>
                    <li><a href="https://www.google.com/advanced_search?"> Advanced </a></li>
                </ul>
            </nav>
    <div>
        <div class="center">
                <div>
                    <form action="https://google.com/search">
                <input type="text" name="q">
                <input type="submit" value="Google Search">
            </form>
                </div>
            </div>
    </div>

    </body>
</html>

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

html {
    font-size: small;
    box-sizing: border-box;
}

body {
    margin: 0px;
    padding: 0px;
    min-height: 100vh;
    font-family: arial,sans-serif;
}

nav {
    padding: 10px;
    margin-bottom: 4rem;
    font-size: 1.5rem;
    @media (min-width: 600px){
        padding: 20px;
    }
    ul {
            list-style-type:  none;
            margin: 0px;
            padding: 0px;
      }
    a {
      font-size: 1.25rem;
      
      @media (min-width: 42em){
        font-size: 2rem;
      }
    }
}

a::before {
}

a:hover {
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

nav.grid {
    ul {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-gap: 10px;
        justify-content: center;
        justify-items: center;

        @media (min-width: 600px){
            grid-template-columns: 1fr repeat(3, fit-content(50px));
            grid-gap: 20px;
            justify-items: end;
        }
    }

    .fullwidth {
        grid-column: 1 / 4;
        @media (min-width: 600px){
            grid-column: 1 / 2;
            justify-self: start;
        }
    }
}

https://codepen.io/dmwcode/pen/ExyWvGR

Answer 1

它是“Less”css 代码。浏览器不理解 Sass/Less 代码。因此，您将需要 Sass/Less pre-processor 将 Sass/Less 代码转换为标准 CSS.

这个过程称为转译。因此，您需要为转译器（某种程序）提供一些 Sass 代码，然后取回一些 CSS 代码。

如果您需要标准 css 代码，您可以在这里：低于标准 Css 已转换您的代码

@import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap"); html {
    font-size: small;
    box-sizing: border-box;
}

body {
    margin: 0px;
    padding: 0px;
    min-height: 100vh;
    font-family: arial, sans-serif;
}

nav {
    padding: 10px;
    margin-bottom: 4rem;
    font-size: 1.5rem;
}

@media (min-width: 600px) {
    nav {
        padding: 20px;
    }
}

nav ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}

nav a {
    font-size: 1.25rem;
}

@media (min-width: 42em) {
    nav a {
        font-size: 2rem;
    }
}

a::before {
}

a:hover {
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
}

nav.grid ul {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    grid-gap: 10px;
    justify-content: center;
    justify-items: center;
}

@media (min-width: 600px) {
    nav.grid ul {
        grid-template-columns: 1fr repeat(3, fit-content(50px));
        grid-gap: 20px;
        justify-items: end;
    }
}

nav.grid .fullwidth {
    grid-column: 1 / 4;
}

@media (min-width: 600px) {
    nav.grid .fullwidth {
        grid-column: 1 / 2;
        justify-self: start;
    }
}

ul 子节点上的网格元素

Grid element on ul child

html

css

grid

dom