我尝试使导航栏使用完整列，但在我的代码CSS中应用的网格列不起作用

Question

为什么网格列不起作用是我的CSS。

我的网页有 3 列，如容器类中定义的那样。

container{
display: grid;
grid-template-column: repeat(3 , 1fr)
}

但我希望导航栏使用全宽来占据整个列

navigation ul{
grid-column: 1 / -1;
display: flex,
justify-content: space-evenly;
}

不幸的是它不起作用。这里它是如何显示的，而不是占据整个宽度、整个列。检查黄线，它是如何空白的，导航栏应该被（主页，关于我们，项目，代理商，联系方式）完全使用，但它只是在一个角落。

请检查我的代码，正确的解释和更正将不胜感激。

1.HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./Styles.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="navigationbar">
            <nav>
                <ul>
                    <li>Home</li>
                    <li>About us</li>
                    <li>Items</li>
                    <li>agents</li>
                    <li>contact</li>
                </ul>
            </nav>
        </div>

        <div class="content">

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

CSS部分

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



.container{
    display: grid;
    grid-template-columns: repeat(3 , 1fr);
    grid-template-rows: auto auto auto;
}



.navigationbar ul{
 grid-column: 1 / -1;
 display: flex;
 justify-content: space-evenly;
}

Answer 1

.container {
  display: grid;
  grid-template-columns: repeat(3 , 1fr);
  grid-template-rows: auto auto auto;
  gap: 1em;
}

.container>* {
  background: pink;
}

nav {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-evenly;
}

.d1, .d2, .d3 {
  height: 100px;
}

<div class="container">
    <nav>
        <a>Home</a>
        <a>About us</a>
        <a>Items</a>
        <a>agents</a>
        <a>contact</a>
    </nav>

    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</div>

我尝试使导航栏使用完整列，但在我的代码CSS中应用的网格列不起作用

问题描述投票：0回答：1

1个回答

最新问题

我尝试使导航栏使用完整列，但在我的代码CSS中应用的网格列不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1