Question

我正在尝试编写一个看起来像这样的项目：

但是当我在html代码中使用无序列表和列表标签时，导航栏（绿色栏）消失了。

    <div class="container">
       <ul class="zone green">
           <li>Head</li>
           <li>Products</li>
           <li>Our Team</li>
           <li>Contact</li>
       </ul>

       <div class="zone red">Cover</div>
       <div class="zone blue">Project Grid</div>
       <div class="zone yellow">Footer</div>
    </div>

我的输出变为：

但是当我改用div标签时，导航栏（绿色栏）重新出现。

    <div class="container">
       <div class="zone green">
           <div>Head</div>
           <div>Products</div>
           <div>Our Team</div>
           <div>Contact</div>
       </div>

       <div class="zone red">Cover</div>
       <div class="zone blue">Project Grid</div>
       <div class="zone yellow">Footer</div>
    </div>

我的输出是这样：

这是我的CSS代码：

.container {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 50px 300px 300px 50px;
   grid-template-areas: "head"
                        "covers"
                        "projectGrid"
                        "footer";    
}

.zone {
   cursor:pointer;
   color:#FFF;
   font-size:2em;
}

.green {
   background: #56B870; 

   display: flex;
   grid-area: head;
}

.red {
   background: #C655BE; 
   grid-area: covers;
}

.blue {
   background: #7abcff; 
   grid-area: projectGrid; 
}

.yellow {
   background: #F3AAAA; 
   grid-area: footer;
}

所以我想知道为什么会这样吗？我将不胜感激任何帮助。谢谢！

Answer 1

ul有一些默认的CSS，因为绿色内容不可见

尝试添加此内容

ul {
        list-style-type: none!important;
        margin-block-start: 0!important;
        margin-block-end: 0!important;
        margin-inline-start: 0!important;
        margin-inline-end: 0!important;
        padding-inline-start: 0px!important;
}

ul{
    list-style-type: none!important;
    margin-block-start: 0!important;
    margin-block-end: 0!important;
    margin-inline-start: 0!important;
    margin-inline-end: 0!important;
    padding-inline-start: 0px!important;
}



.container {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 50px 300px 300px 50px;
   grid-template-areas: "head"
                        "covers"
                        "projectGrid"
                        "footer";    
}

.zone {
   cursor:pointer;
   color:#FFF;
   font-size:2em;
}

.green {
   background: #56B870; 

   display: flex;
   grid-area: head;
}

.red {
   background: #C655BE; 
   grid-area: covers;
}

.blue {
   background: #7abcff; 
   grid-area: projectGrid; 
}

.yellow {
   background: #F3AAAA; 
   grid-area: footer;
}

<div class="container">
       <ul class="zone green">
           <li>Head</li>
           <li>Products</li>
           <li>Our Team</li>
           <li>Contact</li>
       </ul>

       <div class="zone red">Cover</div>
       <div class="zone blue">Project Grid</div>
       <div class="zone yellow">Footer</div>
    </div>

使用flexbox的导航栏消失

1 个答案: