css 使用显示时,移动的导航栏未显示内联而不是垂直:媒体查询中的内联块?

gcxthw6b  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(121)

当我把显示:内联块在媒体查询节在css中不显示我的导航水平内联,而是显示在垂直像以前。我开始编码,我试图创建一个移动的第一网站,扩展到一个内联导航时,超过一个最小宽度。
下面是我的html:

<header> 
    
    <nav class="navbar"> 
        <img src="images.png" alt="logo" class="logo"> 
        <a href="mobile" id="icon" title="Mobile menu"></a>
            <ul class="nav-list"> 
            <li><a class="active" href="index.html"> Home </a></li>      
            <li><a href="snow.html"> Snow </a></li>
            <li><a href="skate.html"> Skate </a></li> 
            <li><a href="accessories.html"> Accessories </a></li>
            </ul>
    </nav> 
    
  

</header>

下面是我的CSS:

.navbar{ 
        align-items: center;
        height: 175px;
        width: 100%;
        background-color: #FFF;
        z-index: 999;
        position: fixed;
        

    }
    .nav-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
    width: 100%;
    height: 100vh;
    top: 40px;
    overflow: hidden;
    position: fixed;
    text-align: center;
    }

    .nav-list li { 
    line-height: 15px;
    margin: 5px 0;
    transition: auto;

    }
    .nav-list li a { 
        color: #000;
        text-decoration: none;
        padding: 10px 23px;
        text-transform: uppercase;
        display: block;
    }

    .nav-list li a.active,.nav-list li a:hover{ 
        transition: 0.75s; 
        color: #702963;
        opacity: 0.5;
    }

    .navbar ul.nav-list { 
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        background-color: var(--grey);
        list-style: none;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
    }


@media screen and (min-width: 1440px) { 
        body, .navbar ul.nav-list, .navlist a, .navlist li {
        width: 100%;
        display: inline-block;
            
        } 
    }

我尝试显示:内联块未水平显示。flex-direction:行;也不会更改为行。

bqf10yzr

bqf10yzr1#

所以flex-direction可以在你设置display: flex的时候工作。请尝试把你的@media中的css修改成如下:

@media screen and (min-width: 1440px) {
  .navbar ul.nav-list {
    display: flex;
    flex-direction: row;
  }
}

相关问题